Exemple de menu
analog101
Messages postés
173
Date d'inscription
Statut
Membre
Dernière intervention
-
analog101 Messages postés 173 Date d'inscription Statut Membre Dernière intervention -
analog101 Messages postés 173 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je cherche des exemples de menu vertical ou horizontal où les sous-menu ne s'affiche que lors du passage de la souris sur une partie ( à droite par ex. ) des cases du menu et non dès que l'on passes n'importe où sur la case.
Merci !
Je cherche des exemples de menu vertical ou horizontal où les sous-menu ne s'affiche que lors du passage de la souris sur une partie ( à droite par ex. ) des cases du menu et non dès que l'on passes n'importe où sur la case.
Merci !
A voir également:
- Exemple de menu
- Tableau word exemple - Guide
- Exemple de code ascii - Guide
- Url exemple - Guide
- Menu déroulant excel - Guide
- Exemple de gmail - Guide
2 réponses
Voici un exemple basique :
CSS :
HTML :
CSS :
<style type="text/css" media="all">
/* CSS du menu */
#menu{
list-style:none;
width:240px;
height:490px;
padding:5px;
background:#fff;
border:2px solid #CCC;
}
#menu li{
position:relative;
}
#menu li a{
display:block;
width:auto;
padding:10px 0;
border-bottom:1px solid #CCC;
text-decoration:none;
text-align:center;
color:#666;
}
#menu li a:hover{
color:#88BF22;
background:#F3F3F3;
text-shadow:0 1px 0 #fff;
}
#menu li ul{
position:absolute;
list-style:none;
left:250px;
display:none;
width:150px;
border:2px solid #CCC;
padding:5px;
top:0;
}
#menu li:hover ul{
display:block;
}
</style>
HTML :
<ul id="menu">
<li><a href="#" title="">Lien avec un sous-menu</a>
<ul>
<li><a href="#" title="">Lien 1</a></li>
<li><a href="#" title="">Lien 2</a></li>
<li><a href="#" title="">Lien 3</a></li>
</ul>
</li>
<li><a href="#" title="">Lien normal</a></li>
<li><a href="#" title="">Lien avec un sous-menu</a>
<ul>
<li><a href="#" title="">Lien 1</a></li>
<li><a href="#" title="">Lien 2</a></li>
<li><a href="#" title="">Lien 3</a></li>
</ul>
</li>
<li><a href="#" title="">Lien normal</a></li>
</ul>
