Liste déroulante HTML la sous liste fait partie du la sous liste fait

Liste déroulante
HTML
<nav id="menu-haut">
<ul>
</ul>
</nav>
<li><a href="#">Accueil</a></li>
<li><a href="#">Etranger</a>
<ul>
<li><a href="#">Italie</a></li>
<li><a href="#">Allemagne</a></li>
<li><a href="#">Espagne</a></li>
</ul>
</li>
<li><a href="#">Politique</a></li>
<li><a href="#">Culture</a>
<ul>
<li><a href="#">Livres</a></li>
<li><a href="#">Cinéma</a></li>
<li><a href="#">Musique</a></li>
</ul>
</li>
<li><a href="#">Social</a></li>
la sous liste fait partie du <li>
la sous liste fait partie du <li>
<div class="clear"></div>
Résultat
CSS
enlever les puces, les marges et les padding des ul
ul {
margin:0;
padding:0;
list-style: none;
}
CSS
faire flotter les <li>, leur donner une largeur, et une
marge droite pour les séparer, leur donner un arrière-plan
<ul>
#menu-haut ul li {
float:left;
width: 99px;
margin-right: 1px;
background: #ccc
}
<li>
<ul>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
CSS
masquer les ul li ul
#menu-haut ul li ul {
display:none;
}
</li>
<li>
Liste déroulante
CSS
faire réapparaître la sous liste en passant le curseur sur
le premier niveau de li
#menu-haut ul li:hover ul {
display:block;
}
Le ul qui était masqué
réapparaît quand on passe le curseur
sur le li qui le contient
<ul>
<li>
<ul><li>
<li>
<li>
</ul>
</ul>
</li>
</li>
</li>
</li>