Menu vertical - Gauche
Menus à integrer dans un bloc de gauche
Dans cette exemple la taille a été fixée pour un bloc ayant une largeur de 180px
Ce menu va afficher 3 rubriques, contenant des sous-rubriques.
Une des sous-rubrique contient aussi une sous-rubrique (Voir LIEN 1 -> 5. sous-liens 1 >)
Démo
Code Html
Code CSS (A ajouter de le fichier css de votre thème)
.menu {
font-family: arial, sans-serif;
position:absolute;
margin:0 0 0 0px;
font-size:11px;z-index:20;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000; width:176px;
height:20px;
text-align:center;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:19px;
font-size:11px;margin:0;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
width:176px;
}
.menu ul li {
float:left;
margin-right:172px;
position:relative;
}
.menu ul li ul {
display: none;
}
/* spécifique à IE */
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:0;
left:177px;
width:176px;
}
.menu ul li:hover ul li a.hide {
background:#dfc184;
color:#000;
z-index:40;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display:block;
background:#b3ab79;
color:#000;
width:176px;
}
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:177px;
top:0;
color:#000;
}
.menu ul li:hover ul li:hover ul li a {
display:block;
width:176px;
background:#dfc184;
color:#000;
margin: 0;
}
.menu ul li:hover ul li:hover ul li a:hover {
background:#bd8d5e;
color:#fff;
margin:0;
}
.end_padding {
padding:35px
}
Pour toutes questions: Forum
| 
27 
Posté : 13-03-2013 13:55
Profil
www