Menu déroulant en HTML et CSS
Voici une solution pour faire un menu déroulant simplement en utilisant uniquement HTML et CSS.
Exemple de menu déroulant
Vous avez le CSS et le HTML, à vous de l’adapter à vos besoins en modifiant ce qu’il vous faut.
#menu{
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 0;
}
#menu li{
float: left;
text-align:center;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menu li a:link, #menu li a:visited{
display: block;
height: 1%;
color: #FFF;
background: green;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menu li a:hover {background-color: #F2462E;}
#menu li a:active {background-color: #5F879D;}
#menu .sousMenu{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menu .sousMenu li{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menu .sousMenu li a:link, #menu .sousMenu li a:visited{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
}
#menu .sousMenu li a:hover{
background-image: none;
background-color: #F2462E;
}
#menu li:hover > .sousMenu {display: block;}<ul id="menu">
<li><a href="#">Fruits</a>
<ul class="sousMenu">
<li><a href="#">Pomme</a></li>
<li><a href="#">Orange</a></li>
<li><a href="#">Banane</a></li>
<li><a href="#">Figue</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul class="sousMenu">
<li><a href="#">Basket</a></li>
<li><a href="#">Roller Derby</a></li>
<li><a href="#">Tennis</a></li>
</ul>
</li>
<li><a href="#">Capitales</a>
<ul class="sousMenu">
<li><a href="#">Paris</a></li>
<li><a href="#">Londres</a></li>
</ul>
</li>
<li><a href="#">Prénoms</a>
<ul class="sousMenu">
<li><a href="#">Emilie</a></li>
<li><a href="#">Pierre</a></li>
<li><a href="#">Lionel</a></li>
<li><a href="#">Virginie</a></li>
<li><a href="#">Sebastien</a></li>
</ul>
</li>
</ul>