Menu déroulant à 2 niveau

• Menu 1
• Menu 2
  • sMenu 2-1
  • sMenu 2-2
• Menu 3
  • sMenu 3-1
  • sMenu 3-2
  • sMenu 3-3
• Menu 4
  • sMenu 4-1
  • sMenu 4-2

{extravote 5}

Ici le CSS pour construire ce menu :

/*on crée une barre pour contenir le menu*/
.menuEx {
height:44px;
width:300px;
z-index:999;
display:block;
background-color:#333;
}
/*on définit les buttons du 1er niveau*/
.menuEx .menuEx-actif a {
text-decoration:none;
color: #73a92d;
font-size:12px;
height:12px;
display:block;
padding:15px 13px 15px 11px;
}
/*on définit la boite du menu*/
.menuEx ul {
margin:0px;
padding:0px 0px 0px 0px;
z-index:999;
height:44px;
}
/*on définit tout les item du 1er menu, backgroung ....*/
.menuEx li {
list-style-type: none;
float:left;
display:block;
margin:0px;
padding:0px;
}
/*on défininit tout les buttons de lien, backgroung ....*/
.menuEx li a {
text-decoration:none;
color: #ffffff;
font-size:12px;
height:12px;
display:block;
padding:15px 13px 15px 11px;
}
/*on définit tout les attributs des boutons de lien du premier niveau, backgroung .... when mouseover*/
.menuEx li a:hover {
text-decoration:none;
color:#666;
font-size:12px;
display:block;
height:12px;
padding:15px 13px 15px 11px;
clear:both;
}
/*on définit la boites des sous menu*/
.menuEx li ul{
display:none;
height:auto;
width:125px;
padding:0;
position:absolute;
z-index:999;
clear:both;
}
/*on définit la boite du sous-menu quand on la souris survol le menu*/
.menuEx li:hover ul{
display:block;
padding:2px 0 12px 0;
float:left;
background-color:#999;
}
/*on définit les item de sous-menu*/
.menuEx li ul li {
list-style-type: none;
width:69px;
margin:0;
padding:0 13px;
margin:0 0 0 13px;
float:left;
background:none;
border-bottom:#FFF dotted 1px;
}
/*on définit les liens des boutons des sous menu*/
.menuEx li ul li a:hover,
.menuEx li ul li a {
text-decoration:none;
color: #FFF;
font-size:11px;
height:13px;
display:block;
padding:5px 0;
margin:0px;
width:75px;
}
/*on définit les boutons de lien lorsque ces derniers sont survolés*/
.menuEx li ul li a:hover {
color: #d9d9d9;
padding:5px 0 5px 0;
}