时间戳

首页 > 解决方案 > 悬停下拉菜单外观

html - 悬停下拉菜单外观

问题描述

我正在尝试在某人多年前创建的网站上工作......我对编码知之甚少，所以我真的脱离了我的舒适区并努力做到最好。

我想在我的导航栏中做一个下拉菜单，我能够做到。我唯一的问题是该按钮看起来不像我的导航栏的其余部分。它就像在一个盒子里，我不知道如何让它看起来像其他的一样。

.dropbtn {
    background-color: none;
    color:black;
    padding: 16px;
    font-size: 18px;
    text-decoration:none;
    border: none;
    height: 22px;
    font-family:Arial;
    font-size: 24px;
    outline : none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background-color: white;
}

.dropdown-content a:hover {background-color:#ddd}

.dropdown:hover .dropdown-content {
    display: block;
    
}

.dropdown:hover .dropbtn {
    background-color:#C0D9D;
    text-decoration:underline;
    color:#C0D9D9;
    font-size: 24px;
    font-family: Arial;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Gestion & Partage</title>
</head>

<body>


<?php

function MakeHeader()
{
    echo "<div id='logo'><img src='logo.png' style='float:left; width:200px;'/></div>";
    echo "<div id='logo_w1'><b>Tournoi Provincial Midget/Juvénile<br/>Saint-Joseph-de-Beauce</b><br/>42e édition</div>";
    echo "<div id='header_text'>";
    echo "</div>";
    
    //echo "<div id='header_right'>";       
        //echo "<img src='images/nom_image.extensions'>";
    //echo "</div><!-- fin header_right -->";   
    
    echo "<ul>";
    echo "<li><a href='index.php'>Accueil</a></li>";
    echo "<li><div class='dropdown'>
  <button class='dropbtn'>Dropdown</button>
  <div class='dropdown-content'>
    <a href='#'>Link 1</a>
    <a href='#'>Link 2</a>
    <a href='#'>Link 3</a>
  </div>
</div></li>";
    echo "<li><a href='info.php'>Informations</a></li>";
    echo "<li><a href='hebergement.php'>Hébergement</a></li>";
    echo "<li><a href='horaire_et_resultats.php'>Horaires & Résultats</a></li>";
    echo "<li><a href='photo.php'>Photos</a></li>";
    echo "<li><a href='historique.php'>Historique</a></li>";
    echo "</ul>";
        
    echo "<div class='clear'></div><!-- protection contre les float -->";      
}

function MakeFooter()
{
    echo "<div id='footer'>";
        echo "<div style='width:350' align='center'>";
            echo "<div id='hrefjoin' style='float:left'><a href='nouscontacter.php'>Nous contacter</a></div>";
        echo "</div>";
    echo "</div>";     
}
?>
         

</body>
</html>

标签： htmlhoverdropdown

解决方案

那是因为您将它创建为一个按钮，并且您在 css 中应用了类似样式的框。使它a像其他菜单项一样成为anchor( )。

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background-color: white;
}

.dropdown-content a:hover {background-color:#ddd}

.dropdown:hover .dropdown-content {
    display: block;    
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Gestion & Partage</title>
</head>

<body>


<?php

function MakeHeader()
{
	echo "<div id='logo'><img src='logo.png' style='float:left; width:200px;'/></div>";
	echo "<div id='logo_w1'><b>Tournoi Provincial Midget/Juvénile<br/>Saint-Joseph-de-Beauce</b><br/>42e édition</div>";
	echo "<div id='header_text'>";
	echo "</div>";
	
    //echo "<div id='header_right'>";    	
		//echo "<img src='images/nom_image.extensions'>";
    //echo "</div><!-- fin header_right -->";	
	
	echo "<ul>";
	echo "<li><a href='index.php'>Accueil</a></li>";
	echo "<li><div class='dropdown'>
  <a href='#'>Dropdown</a>
  <div class='dropdown-content'>
    <a href='#'>Link 1</a>
    <a href='#'>Link 2</a>
    <a href='#'>Link 3</a>
  </div>
</div></li>";
    echo "<li><a href='info.php'>Informations</a></li>";
    echo "<li><a href='hebergement.php'>Hébergement</a></li>";
    echo "<li><a href='horaire_et_resultats.php'>Horaires & Résultats</a></li>";
    echo "<li><a href='photo.php'>Photos</a></li>";
	echo "<li><a href='historique.php'>Historique</a></li>";
	echo "</ul>";
		
    echo "<div class='clear'></div><!-- protection contre les float -->";      
}

function MakeFooter()
{
	echo "<div id='footer'>";
  		echo "<div style='width:350' align='center'>";
    		echo "<div id='hrefjoin' style='float:left'><a href='nouscontacter.php'>Nous contacter</a></div>";
    	echo "</div>";
    echo "</div>";     
}
?>
         

</body>
</html>

推荐阅读