Nous allons réaliser cette fois un menu plus complexe avec des sous-menus ayant eux aussi des sous-menus.
Voici ci-dessous, l'exemple type d'un menu horizontal un peu élaboré et complexe que nous pouvons réaliser.
Essayez an passant le curseur de la souris sur les éléments du menu:
Pour simplifier la compréhension, nous allons utiliser une liste à puce avec seulement 2 éléments dans le menu.
Voici ci-dessous la liste à puce sur laquelle nous allons travailler:
<ul class="hormenu">
<li><a href="#">Menu A</a>
<ul>
<li><a href="#">Sous-Menu B</a>
<ul>
<li><a href="#">Sous-Menu C</a></li>
<li><a href="#">Sous-Menu C</a></li>
<li><a href="#">Sous-Menu C</a></li>
</ul>
</li>
<li><a href="#">Sous-Menu B</a>
<ul>
<li><a href="#">Sous-Menu C</a></li>
<li><a href="#">Sous-Menu C</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu A</a>
</ul>
Pour faciliter la compréhension, nous nomerons:
"Menu A" pour le menu principal,
"sous-Menu B" un sous-menu d'un "Menu A",
et "sous-Menu C" un sous-menu d'un "sous-Menu B".
Est-ce clair? essayer l'exemple ci-dessous pour mieux comprendre!
Nous travaillerons sur le css afin d'obtenir le résultat suivant:
Vous pouvez voir, et tester le résultat ci-dessous:
Les premiers réglages ont été traité dans Création pas à pas d'un menu horizontal simple.
Dans cet article nous avons expliqué la création du Menu A
Code CSS:
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
Afin d'afficher les sous-menu B et sous-menu C en face du menu A, il faut les déclarer en position:absolute; et les placer automatiquement avec top:auto; et left:auto;
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /* Position absolu */
Mais maintenant, il faut cacher à la vue les sous-menu B et sous-menu C.
Pour cela plusieurs solutions existent. En premier, il suffit d'utiliser visibility:hidden; pour cacher à la vue
ou bien l'envoyer loin de la vue avec left:-999px!
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /* Position absolu */
.hormenu li ul {visibility:hidden; } /* et Hop on cache les menus B et C */
Vous pouvez voir, et tester le résultat ci-dessous:
Dans notre exemple, les éléments du menu A sont collés. Il convient de les espacer légèrement.
Le plus simple est de mettre une bordure à droite border-right:3px solid transparent; ou à gauche border-left:3px solid transparent; transparente.
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /* Position absolu */
.hormenu li ul {visibility:hidden; } /* et Hop on cache les menus B et C */
.hormenu li { border-right:3px solid transparent;} /* espacement des éléments */
Vous pouvez voir, et tester le résultat ci-dessous:
Au passage du curseur de la souris sur un élément du menu A, nous allons changer la couleur de fond et celui du texte.
Nous en profitons aussi pour souligner le lien avec text-decoration:underline;
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /* Position absolu */
.hormenu li ul {visibility:hidden; } /* et Hop on cache les menus B et C */
.hormenu li { border-right:3px solid transparent;} /* espacement des éléments */
.hormenu a:hover {text-decoration:underline; background:#b1d9ff; color:#005aae; }
Vous pouvez voir, et tester le résultat ci-dessous:
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /* Position absolu */
.hormenu li ul {visibility:hidden; } /* et Hop on cache les menus B et C */
.hormenu li { border-right:3px solid transparent;} /* espacement des éléments */
.hormenu a:hover {text-decoration:underline; background:#b1d9ff; color:#005aae; }
/* Avant de voir les sous-menus B et C il faut les définir */
.hormenu ul { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none; /* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu li ul { width:144px; } /* pour forcer le flottant verticalement */
.hormenu li ul li { border-top:3px solid transparent; } /* espacement des éléments */
/* Au passage de la souris sur li, les sous-menus B et C sont rendus visibles */
.hormenu li:hover ul {visibility:visible; } /* Hop, menu B et menu C visible */
.hormenu li:hover ul ul {visibility:hidden; } /* Hop, on cache le menu C */
Vous pouvez voir, et tester le résultat ci-dessous:
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /* Position absolu */
.hormenu li ul {visibility:hidden; } /* et Hop on cache les menus B et C */
.hormenu li { border-right:3px solid transparent;} /* espacement des éléments */
.hormenu a:hover {text-decoration:underline; background:#b1d9ff; color:#005aae; }
/* Avant de voir les sous-menus B et C il faut les définir */
.hormenu ul { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none; /* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu li ul { width:144px; } /* pour forcer le flottant verticalement */
.hormenu li ul li { border-top:3px solid transparent; } /* espacement des éléments */
/* Au passage de la souris sur li, les sous-menus B et C sont rendus visibles */
.hormenu li:hover ul {visibility:visible; } /* Hop, menu B et menu C visible */
.hormenu li:hover ul ul {visibility:hidden; } /* Hop, on cache le menu C */
.hormenu li li:hover ul {visibility:visible; } /* Hop, le menu C devient visible */
/* Mais il faut décaler le sous-menu C pour */
/* qu'il ne chevauche pas un sous-menu B ou menu A */
.hormenu li ul ul { margin:-28px 0 0 144px ; } /* top 25px+3px et left 144px */
.hormenu li ul ul { border-left:3px solid transparent; }/*espacement gauche */
Vous pouvez voir, et tester le résultat ci-dessous:
Il est possible de changer la largeur du sous-menu B ou sous-menu C en définissant une classe telle que:
ul.w200 a { width:200px; }
Mais dans ce cas c'est tous les sous-menus qui prennent cette largeur.
Il faudra ainsi coder la liste:
...
<li><a href="#"><span>Sous-Menu B</span></a>
<ul class="w200">
<li><a href="#">Sous-Menu C</a></li>
<li><a href="#">Sous-Menu C</a></li>
<li><a href="#">Sous-Menu C</a></li>
</ul>
</li>...
Vous pouvez voir, et tester le résultat ci-dessous:
<ul class="hormenu">
<li><a href="#"><span>Menu A</span></a>
<ul>
<li><a href="#"><span>Sous-Menu B</span></a>
<ul>
<li><a href="#">Sous-Menu C</a></li>
<li><a href="#">Sous-Menu C</a></li>
<li><a href="#">Sous-Menu C</a></li>
</ul>
</li>
<li><a href="#"><span>Sous-Menu B</span></a>
<ul>
<li><a href="#">Sous-Menu C</a></li>
<li><a href="#">Sous-Menu C</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu A</a>
</ul>
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /* Position absolu */
.hormenu li ul {visibility:hidden; } /* et Hop on cache les menus B et C */
.hormenu li { border-right:3px solid transparent;} /* espacement des éléments */
.hormenu a:hover {text-decoration:underline; background:#b1d9ff; color:#005aae; }
/* Avant de voir les sous-menus B et C il faut les définir */
.hormenu ul { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none; /* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu li ul { width:144px; } /* pour forcer le flottant verticalement */
.hormenu li ul li { border-top:3px solid transparent; } /* espacement des éléments */
/* Au passage de la souris sur li, les sous-menus B et C sont rendus visibles */
.hormenu li:hover ul {visibility:visible; } /* Hop, menu B et menu C visible */
.hormenu li:hover ul ul {visibility:hidden; } /* Hop, on cache le menu C */
.hormenu li li:hover ul {visibility:visible; } /* Hop, le menu C devient visible */
/* Mais il faut décaler le sous-menu C pour */
/* qu'il ne chevauche pas un sous-menu B ou menu A */
.hormenu li ul ul { margin:-28px 0 0 144px ; } /* top 25px+3px et left 144px */
.hormenu li ul ul { border-left:3px solid transparent; }/*espacement gauche */
/* Une flèche est mise pour indiquer un sous-menu verticalement */
.hormenu span { display:block; overflow: hidden;
background:url("/images/icons/flechevn.gif") no-repeat bottom center; }
.hormenu li:hover >a>span { background-image:url("/images/icons/flechevb.gif"); }
/* Une flèche est mise pour indiquer un sous-sous-menu horizontalement */
.hormenu ul span { background-image:url("/images/icons/flechehn.gif");
background-position: right center;} /* au lieu de bottom center */
.hormenu ul li:hover >a>span { background-image:url("/images/icons/flechehb.gif"); }
Vous pouvez voir, et tester le résultat ci-dessous:
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /* Position absolu */
.hormenu li ul {visibility:hidden; } /* et Hop on cache les menus B et C */
.hormenu li { border-right:3px solid transparent;} /* espacement des éléments */
.hormenu a:hover {text-decoration:underline; background:#b1d9ff; color:#005aae; }
/* Avant de voir les sous-menus B et C il faut les définir */
.hormenu ul { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none; /* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu li ul { width:144px; } /* pour forcer le flottant verticalement */
.hormenu li ul li { border-top:3px solid transparent; } /* espacement des éléments */
/* Au passage de la souris sur li, les sous-menus B et C sont rendus visibles */
.hormenu li:hover ul {visibility:visible; } /* Hop, menu B et menu C visible */
.hormenu li:hover ul ul {visibility:hidden; } /* Hop, on cache le menu C */
.hormenu li li:hover ul {visibility:visible; } /* Hop, le menu C devient visible */
/* Mais il faut décaler le sous-menu C pour */
/* qu'il ne chevauche pas un sous-menu B ou menu A */
.hormenu li ul ul { margin:-28px 0 0 144px ; } /* top 25px+3px et left 144px */
.hormenu li ul ul { border-left:3px solid transparent; }/*espacement gauche */
/* Une flèche est mise pour indiquer un sous-menu verticalement */
.hormenu span { display:block; overflow: hidden;
background:url("/images/icons/flechevn.gif") no-repeat bottom center; }
.hormenu li:hover >a>span { background-image:url("/images/icons/flechevb.gif"); }
/* Une flèche est mise pour indiquer un sous-sous-menu horizontalement */
.hormenu ul span { background-image:url("/images/icons/flechehn.gif");
background-position: right center;} /* au lieu de bottom center */
.hormenu ul li:hover >a>span { background-image:url("/images/icons/flechehb.gif"); }
/* Changeons maintenant la couleur des sous-menus B en vert */
.hormenu li ul li a { background:#0C6; color:#fff; }
.hormenu li ul li a:hover { background:#6F9; color:#060; }/*au passage de la souris */
/* Changeons maintenant la couleur des sous-menus C en rose */
.hormenu li ul ul a { background:#FCC; color:#F09; }
.hormenu li ul ul a:hover { background:#FC9; color:#F30; }/*au passage de la souris*/
Vous pouvez voir, et tester le résultat ci-dessous:
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /* Position absolu */
.hormenu li ul {visibility:hidden; } /* et Hop on cache les menus B et C */
.hormenu li { border-right:3px solid transparent;} /* espacement des éléments */
.hormenu a:hover {text-decoration:underline; background:#b1d9ff; color:#005aae; }
/* Avant de voir les sous-menus B et C il faut les définir */
.hormenu ul { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none; /* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu li ul { width:144px; } /* pour forcer le flottant verticalement */
.hormenu li ul li { border-top:3px solid transparent; } /* espacement des éléments */
/* Au passage de la souris sur li, les sous-menus B et C sont rendus visibles */
.hormenu li:hover ul {visibility:visible; } /* Hop, menu B et menu C visible */
.hormenu li:hover ul ul {visibility:hidden; } /* Hop, on cache le menu C */
.hormenu li li:hover ul {visibility:visible; } /* Hop, le menu C devient visible */
/* Mais il faut décaler le sous-menu C pour */
/* qu'il ne chevauche pas un sous-menu B ou menu A */
.hormenu li ul ul { margin:-28px 0 0 144px ; } /* top 25px+3px et left 144px */
.hormenu li ul ul { border-left:3px solid transparent; }/*espacement gauche */
/* Une flèche est mise pour indiquer un sous-menu verticalement */
.hormenu span { display:block; overflow: hidden;
background:url("/images/icons/flechevn.gif") no-repeat bottom center; }
.hormenu li:hover >a>span { background-image:url("/images/icons/flechevb.gif"); }
/* Une flèche est mise pour indiquer un sous-sous-menu horizontalement */
.hormenu ul span { background-image:url("/images/icons/flechehn.gif");
background-position: right center;} /* au lieu de bottom center */
.hormenu ul li:hover >a>span { background-image:url("/images/icons/flechehb.gif"); }
/* Changeons maintenant la couleur des sous-menus B en vert */
.hormenu li ul li a { background:#0C6; color:#fff; }
.hormenu li ul li a:hover { background:#6F9; color:#060; }/*au passage de la souris */
/* Changeons maintenant la couleur des sous-menus C en rose */
.hormenu li ul ul a { background:#FCC; color:#F09; }
.hormenu li ul ul a:hover { background:#FC9; color:#F30; }/*au passage de la souris*/
/* Mettons les sous-menus B et sous-menu C un peu transparent */
.hormenu ul { opacity:0.92; filter:alpha(opacity=92); }
Vous pouvez voir, et tester le résultat ci-dessous:
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /* Position absolu */
.hormenu li ul {visibility:hidden; } /* et Hop on cache les menus B et C */
.hormenu li { border-right:3px solid transparent;} /* espacement des éléments */
.hormenu a:hover {text-decoration:underline; background:#b1d9ff; color:#005aae; }
/* Avant de voir les sous-menus B et C il faut les définir */
.hormenu ul { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none; /* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu li ul { width:144px; } /* pour forcer le flottant verticalement */
.hormenu li ul li { border-top:3px solid transparent; } /* espacement des éléments */
/* Au passage de la souris sur li, les sous-menus B et C sont rendus visibles */
.hormenu li:hover ul {visibility:visible; } /* Hop, menu B et menu C visible */
.hormenu li:hover ul ul {visibility:hidden; } /* Hop, on cache le menu C */
.hormenu li li:hover ul {visibility:visible; } /* Hop, le menu C devient visible */
/* Mais il faut décaler le sous-menu C pour */
/* qu'il ne chevauche pas un sous-menu B ou menu A */
.hormenu li ul ul { margin:-28px 0 0 144px ; } /* top 25px+3px et left 144px */
.hormenu li ul ul { border-left:3px solid transparent; }/*espacement gauche */
/* Une flèche est mise pour indiquer un sous-menu verticalement */
.hormenu span { display:block; overflow: hidden;
background:url("/images/icons/flechevn.gif") no-repeat bottom center; }
.hormenu li:hover >a>span { background-image:url("/images/icons/flechevb.gif"); }
/* Une flèche est mise pour indiquer un sous-sous-menu horizontalement */
.hormenu ul span { background-image:url("/images/icons/flechehn.gif");
background-position: right center;} /* au lieu de bottom center */
.hormenu ul li:hover >a>span { background-image:url("/images/icons/flechehb.gif"); }
/* Changeons maintenant la couleur des sous-menus B en vert */
.hormenu li ul li a { background:#0C6; color:#fff; }
.hormenu li ul li a:hover { background:#6F9; color:#060; }/*au passage de la souris */
/* Changeons maintenant la couleur des sous-menus C en rose */
.hormenu li ul ul a { background:#FCC; color:#F09; }
.hormenu li ul ul a:hover { background:#FC9; color:#F30; }/*au passage de la souris*/
/* Mettons les sous-menus B et sous-menu C un peu transparent */
.hormenu ul { opacity:0.92; filter:alpha(opacity=92); }
/* Mettons un peu de coins arrondis */
.hormenu a { -moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
behavior: url(/css/PIE.htc); }
Vous pouvez voir, et tester le résultat ci-dessous:
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /* Position absolu */
.hormenu li ul {visibility:hidden; } /* et Hop on cache les menus B et C */
.hormenu li { border-right:3px solid transparent;} /* espacement des éléments */
.hormenu a:hover {text-decoration:underline; background:#b1d9ff; color:#005aae; }
/* Avant de voir les sous-menus B et C il faut les définir */
.hormenu ul { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none; /* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu li ul { width:144px; } /* pour forcer le flottant verticalement */
.hormenu li ul li { border-top:3px solid transparent; } /* espacement des éléments */
/* Au passage de la souris sur li, les sous-menus B et C sont rendus visibles */
.hormenu li:hover ul {visibility:visible; } /* Hop, menu B et menu C visible */
.hormenu li:hover ul ul {visibility:hidden; } /* Hop, on cache le menu C */
.hormenu li li:hover ul {visibility:visible; } /* Hop, le menu C devient visible */
/* Mais il faut décaler le sous-menu C pour */
/* qu'il ne chevauche pas un sous-menu B ou menu A */
.hormenu li ul ul { margin:-28px 0 0 144px ; } /* top 25px+3px et left 144px */
.hormenu li ul ul { border-left:3px solid transparent; }/*espacement gauche */
/* Une flèche est mise pour indiquer un sous-menu verticalement */
.hormenu span { display:block; overflow: hidden;
background:url("/images/icons/flechevn.gif") no-repeat bottom center; }
.hormenu li:hover >a>span { background-image:url("/images/icons/flechevb.gif"); }
/* Une flèche est mise pour indiquer un sous-sous-menu horizontalement */
.hormenu ul span { background-image:url("/images/icons/flechehn.gif");
background-position: right center;} /* au lieu de bottom center */
.hormenu ul li:hover >a>span { background-image:url("/images/icons/flechehb.gif"); }
/* Changeons maintenant la couleur des sous-menus B en vert */
.hormenu li ul li a { background:#0C6; color:#fff; }
.hormenu li ul li a:hover { background:#6F9; color:#060; }/*au passage de la souris */
/* Changeons maintenant la couleur des sous-menus C en rose */
.hormenu li ul ul a { background:#FCC; color:#F09; }
.hormenu li ul ul a:hover { background:#FC9; color:#F30; }/*au passage de la souris*/
/* Mettons les sous-menus B et sous-menu C un peu transparent */
.hormenu ul { opacity:0.92; filter:alpha(opacity=92); }
/* Mettons un peu de coins arrondis */
.hormenu a { -moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
behavior: url(/css/PIE.htc); }
/* Mettons un peu d'ombre */
.hormenu a { -moz-box-shadow:5px 5px 2px 0px #666;
-webkit-box-shadow:5px 5px 2px 0px #666;
box-shadow:5px 5px 2px 0px #666;
behavior: url(/css/PIE.htc);}
Vous pouvez voir, et tester le résultat ci-dessous:
Code CSS:
.navigation { width:750px; height:32px; margin:0px; padding:5px 0; background-color:#CCC; }
.navigation { -moz-box-shadow:5px 5px 2px 0px #666;
-webkit-box-shadow:5px 5px 2px 0px #666;
box-shadow:5px 5px 2px 0px #666;
behavior: url(/css/PIE.htc); }
.hormenu { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none;/* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu { margin-left:210px; } /* pour centrer un peu le menu dans la barre */
.hormenu li { float:left; } /* alignement horizontal grâce au flottant */
.hormenu li a { display:block; /* affichage en block */
width:144px; height:25px; line-height:25px; /* dimenssion */
margin:0; padding:0; /* Marges extérieures haut et bas à 0px */
background-color:#005aae; color:#b1d9ff; text-decoration:none; }
.hormenu li ul { position:absolute; top:auto; left:auto; } /* Position absolu */
.hormenu li ul {visibility:hidden; } /* et Hop on cache les menus B et C */
.hormenu li { border-right:3px solid transparent;} /* espacement des éléments */
.hormenu a:hover {text-decoration:underline; background:#b1d9ff; color:#005aae; }
/* Avant de voir les sous-menus B et C il faut les définir */
.hormenu ul { margin:0; padding:0; /* marges extérieures et intérieures à zéro */
list-style-type:none; /* suppression des puces */
text-align:center; } /* centrage du texte */
.hormenu li ul { width:144px; } /* pour forcer le flottant verticalement */
.hormenu li ul li { border-top:3px solid transparent; } /* espacement des éléments */
/* Au passage de la souris sur li, les sous-menus B et C sont rendus visibles */
.hormenu li:hover ul {visibility:visible; } /* Hop, menu B et menu C visible */
.hormenu li:hover ul ul {visibility:hidden; } /* Hop, on cache le menu C */
.hormenu li li:hover ul {visibility:visible; } /* Hop, le menu C devient visible */
/* Mais il faut décaler le sous-menu C pour */
/* qu'il ne chevauche pas un sous-menu B ou menu A */
.hormenu li ul ul { margin:-28px 0 0 144px ; } /* top 25px+3px et left 144px */
.hormenu li ul ul { border-left:3px solid transparent; }/*espacement gauche */
/* Une flèche est mise pour indiquer un sous-menu verticalement */
.hormenu span { display:block; overflow: hidden;
background:url("/images/icons/flechevn.gif") no-repeat bottom center; }
.hormenu li:hover >a>span { background-image:url("/images/icons/flechevb.gif"); }
/* Une flèche est mise pour indiquer un sous-sous-menu horizontalement */
.hormenu ul span { background-image:url("/images/icons/flechehn.gif");
background-position: right center;} /* au lieu de bottom center */
.hormenu ul li:hover >a>span { background-image:url("/images/icons/flechehb.gif"); }
/* Changeons maintenant la couleur des sous-menus B en vert */
.hormenu li ul li a { background:#0C6; color:#fff; }
.hormenu li ul li a:hover { background:#6F9; color:#060; }/*au passage de la souris */
/* Changeons maintenant la couleur des sous-menus C en rose */
.hormenu li ul ul a { background:#FCC; color:#F09; }
.hormenu li ul ul a:hover { background:#FC9; color:#F30; }/*au passage de la souris*/
/* Mettons les sous-menus B et sous-menu C un peu transparent */
.hormenu ul { opacity:0.92; filter:alpha(opacity=92); }
/* Mettons un peu de coins arrondis */
.hormenu a { -moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
behavior: url(/css/PIE.htc); }
/* Mettons un peu d'ombre */
.hormenu a { -moz-box-shadow:5px 5px 2px 0px #666;
-webkit-box-shadow:5px 5px 2px 0px #666;
box-shadow:5px 5px 2px 0px #666;
behavior: url(/css/PIE.htc);}
Code html:
<div class="navigation">
<ul class="hormenu">
<li><a href="#">accueil</a></li>
<li><a href="#"><span>membres</span></a>
<ul>
<li><a href="#">connexion</a></li>
<li><a href="#">inscription</a></li>
</ul>
</li>
<li><a href="#"><span>images</span></a>
<ul>
<li><a href="#"><span>photos</span></a>
<ul>
<li><a href="#">catégorie 1</a></li>
<li><a href="#">catégorie 2</a></li>
</ul>
</li>
<li><a href="#">vidéos</a></li>
</ul>
</li>
<li><a href="#"><span>téléchargements</span></a>
<ul>
<li><a href="#">vidéos</a></li>
<li><a href="#">musiques</a></li>
</ul>
</li>
<li><a href="#"><span>plus</span></a>
<ul>
<li><a href="#">forum</a></li>
<li><a href="#">liens</a></li>
<li><a href="#">nous contacter</a></li>
<li><a href="#">recherche</a></li>
</ul>
</li>
</ul>
</div>
Résultat: