(683 mots dans ce texte ) -
lu : 4283 Fois
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
territoire![]() ![]() ![]() |
|
Les Commentaires sont la propriété de leurs auteurs. Nous ne sommes pas responsables de leur contenu. |
Retour à la sous-rubrique :
Autres publications de la sous-rubrique :