Menu déroulant en HTML et CSS

Voici une solution pour faire un menu déroulant simplement en utilisant uniquement HTML et CSS.
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>