Menu imbriqué (dropdown) en CSS
Il est possible de créer des menus imbriqués (dropdown) en utilisant uniquement CSS.
La première étape consiste naturellement à créer le menu en HTML
<ul id="nav">
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">The product</a></li>
<li><a href="#">Meet the team</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Sevice one</a></li>
<li><a href="#">Sevice two</a></li>
<li><a href="#">Sevice three</a></li>
<li><a href="#">Sevice four</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
... puis à ajouter le code CSS. Le truc consiste à utiliser le modificateur :hover. En temps normal on cache pas les sous-menus:
#nav ul{ left: -9999px; }
Lorsque la souris se trouve sur l'élément li, on affiche le sous-menu:
#nav li:hover ul{ left: 0; }
Voici un exemple complet en CSS:
#nav{
list-style: none;
font-weight: bold;
margin: 0 0 10px 0;
padding: 0;
/* ou alors utiliser position: absolute */
float: left;
width: 100%;
}
#nav li{
float: left;
margin: 0 1px 0 0;
padding: 0;
position: relative;
}
#nav a{
display: block;
padding: 2px 10px;
color: #fff;
background: #333;
text-decoration: none;
}
/* SOUS-MENUS */
#nav ul{
margin: 0;
padding: 0;
background: #fff; /* truc pour IE7 */
background: rgba(255,255,255,0);
list-style: none;
position: absolute;
/* au lieu d'utiliser display:none;
on 'pousse' le sous-menu en dehors de l'écran */
left: -9999px;
}
#nav ul li{
float:none;
}
#nav ul a{
white-space: nowrap;
}
/* ICI est le truc pour afficher le sous-menu */
#nav li:hover ul{
left: 0;
}
#nav li:hover a{
background: #666;
}
#nav li:hover ul li a:hover{
background:#333;
}
