Le css3 apporte son petit lots de choses interessantes, notemment la possibilité de skinner les balises <li> et <ul> afin d'en faire des menu deroulant en tout simplicité
Voici le tutorial pour realiser vos menu déroulant en css3
1ere partie le css : Ceci est a ajouter dans votre feuille de style
ul#nav {
list-style: none;
padding-left: 10px;
margin: 0;
padding-top: 10px;
}
#nav li {
float: left;
position: relative;
margin-right:2px;
padding-left: 5px;
padding-right: 35px;
margin-right:2px;
z-index: 2;
}
ul#nav li a {
display: block;
height: 23px;
font-weight: bold;
color:#000000;
}
ul#nav li.plop a {
background: #c0c0c0;
height: 30px;
width:180px;
padding-left: 5px;
}
ul#nav li.current a {
background-color: #787878;
text-align:left;
}
li ul {
list-style: none;
display: none;
position: absolute;
width:192px;
top: 0;
left: 0;
margin-left:-1px;
padding: 5px 0px 0px 0px;
}
li>ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul {
display: block;
}
ul#nav li a:hover {
background-color: #FC6;
color:#ffffff;
}
2eme partie le html : à ajouter dans votre page ou doit apparaitre votre menu
<ul id="nav">
<li class="current"><a href="tonlien.html">Titre menu</a></li>
<li><a href="#remonter_haut">Titre Menu</a>
<ul class="sub">
<li class="plop"><a href="tonlien.html" >Titre sous menu</a></li>
<li class="plop"><a href="tonlien.html" >Titre sous menu </a></li>
<li class="plop"><a href="tonlien.html" >Titre sous menu</a></li>
<li class="plop"><a href="tonlien.html" >Titre sous menu </a></li>
<li class="plop"><a href="tonlien.html" >Titre sous menu</a></li>
</ul>
</li>
<li><a href="#remonter_haut">Titre menu 2</a>
<ul class="sub">
<li class="plop"><a href="ton lien.html" >Titre sous menu 2</a></li>
<li class="plop"><a href="ton lien.html" >Titre sous menu 2</a></li>
<li class="plop"><a href="ton lien.html" >Titre sous menu 2</a></li>
<li class="plop"><a href="ton lien.html" >Titre sous menu 2</a></li>
<li class="plop"><a href="ton lien.html" >Titre sous menu 2</a></li>
<li class="plop"><a href="ton lien.html" >Titre sous menu 2 </a></li>
<li class="plop"><a href="ton lien.html" >Titre sous menu 2</a></li>
<li class="plop"><a href="ton lien.html" >Titre sous menu 2 </a></li>
<li class="plop"><a href="ton lien.html" >Titre sous menu 2 </a></li>
<li class="plop"><a href="ton lien.html" >Titre sous menu 2</a></li>
<li class="plop"><a href="ton lien.html" >Titre sous menu 2</a></li>
<li class="plop"><a href="ton lien.html" >Titre sous menu 2</a></li>
</ul>
</li>
</ul>
3eme partie Se qui donne : Exemple