(1918 mots dans ce texte ) -
lu : 5062 Fois
Menu horizontal avec 1 sous-menus
Démo
Code html (A ajouter dans header.html de votre thème par exemple)
Code CSS (A ajouter de le fichier css de votre thème)
/* Menu déroulant - horizontal*/ #header_menu { padding : 0; /* pas de marge intérieure */ margin : 5px 0px 5px 0; /* ni extérieure */ list-style : none; line-height : 20px; /* définit une hauteur pour chaque élément */ font-weight : bold; /* texte en gras */ font-family : Arial; font-size : 12px; /* hauteur du texte : 12 pixels */ z-index: 20; } #header_menu ul { /* Liste */ padding : 0; /* pas de marge intérieure */ margin : 0; /* ni extérieure */ list-style : none; line-height : 20px; /* définit une hauteur pour chaque élément */ } #header_menu a { /* Contenu des listes */ display : block; /* Les liens deviennent des balises de type block */ padding : 0; color : #000; /* couleur du texte */ border: 1px solid #000000; text-decoration : none; } #header_menu li { /* Éléments des listes */ float : left; width : 120px; background: #b2f1f3; text-align:center } #header_menu li ul { /* Sous-listes */ position: absolute; width: 120px; left: -999em; z-index: 30; } #header_menu li ul li { /* Eléments de sous-listes */ } #header_menu li ul ul { margin: -20px 0 0 120px; } #header_menu a:hover { /* Lorsque la souris passe sur un des liens */ color: #fff; /* On passe le texte en noir... */ background:#67bfd3; } #header_menu li:hover ul ul, #menu li.sfhover ul ul { left: -999em; } #header_menu li:hover ul, #header_menu li li:hover ul, #header_menu li.sfhover ul, #header_menu li li.sfhover ul { left: auto; min-height: 0; }
Menu horizontal avec 2 sous-menus (voir rubrique Plus-forums)
Démo
Code html
Code CSS (A ajouter de le fichier css de votre thème)
/* Menu déroulant - horizontal*/ #header_menu { padding : 0; /* pas de marge intérieure */ margin : 5px 0px 5px 0; /* ni extérieure */ list-style : none; line-height : 20px; /* définit une hauteur pour chaque élément */ font-weight : bold; /* texte en gras */ font-family : Arial; font-size : 12px; /* hauteur du texte : 12 pixels */ z-index: 20; } #header_menu ul { /* Liste */ padding : 0; /* pas de marge intérieure */ margin : 0; /* ni extérieure */ list-style : none; line-height : 20px; /* définit une hauteur pour chaque élément */ } #header_menu a { /* Contenu des listes */ display : block; /* Les liens deviennent des balises de type block */ padding : 0; color : #000; /* couleur du texte */ border: 1px solid #000000; text-decoration : none; } #header_menu li { /* Éléments des listes */ float : left; width : 120px; background: #b2f1f3; text-align:center } #header_menu li ul { /* Sous-listes */ position: absolute; width: 120px; left: -999em; z-index: 30; } #header_menu ul li { /* Éléments des listes */ float : left; width : 120px; background: #b2f1f3; text-align:center } #header_menu ul li ul { /* Sous-listes */ position: absolute; width: 120px; left: -2em; z-index: 30; } #header_menu ul li { /* (Sous-liste de Sous-listes) Éléments des listes */ float:left; margin-right:172px; position:relative; } #header_menu ul li ul li{ /* Sous-liste des Sous-listes */ position:relative; margin-top: -1px; z-index:50; } #header_menu li ul ul { margin: -20px 0 0 120px; } #header_menu a:hover { /* Lorsque la souris passe sur un des liens */ color: #fff; /* On passe le texte en blanc... */ background:#67bfd3; } #header_menu li:hover ul ul, #menu li.sfhover ul ul { left: -999em; } #header_menu li:hover ul, #header_menu li li:hover ul, #header_menu li.sfhover ul, #header_menu li li.sfhover ul { left: auto; min-height: 0; }
Pour toutes questions: Forum
Retour à la sous-rubrique :
Autres publications de la sous-rubrique :