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 - 9 nov. 2011 à 18:38

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 !

Afficher la suite

2 réponses

Poivreblanc

Voici un exemple basique :

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>

Réponse 2 / 2
analog101 Messages postés 173 Date d'inscription Statut Membre Dernière intervention 3

merci c'est en ligne sur un site pour voir ?
0

Exemple de menu

2 réponses

Discussions similaires

Newsletters