Падающий вид выпадающего меню - PullRequest
Новая
       11

Падающий вид выпадающего меню

0 голосов
/ 13 мая 2018

Я пытаюсь работать над сайтом, который кто-то создал несколько лет назад ... У меня очень мало знаний в области кодирования, поэтому я действительно вне моей зоны комфорта и пытаюсь сделать все возможное.

Я хотел сделать выпадающее меню в моей навигационной панели, которое я смог. Моя единственная проблема заключается в том, что кнопка dosent выглядит как остальная часть моей навигационной панели. Это как в коробке, и я не могу понять, как сделать так, чтобы она выглядела как остальные.

Спасибо! 

.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>

1 Ответ

0 голосов
/ 13 мая 2018

Это потому, что вы создаете его как кнопку и применяете блок, как стиль в CSS.Сделайте его якорем (a), как и остальные пункты меню. 

.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>
...