(1250 mots dans ce texte ) -
lu : 3250 Fois
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*/ #menu { padding : 0; /* pas de marge intérieure */ margin : 5px 0px 5px 0; /* marges de 5 pixel en haut en bas */ list-style : none; /* Pas de puce */ line-height : 25px; /* 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 */ } #menu ul { /* Liste */ padding : 0; /* pas de marge intérieure */ margin : 0; /* ni extérieure */ list-style : none; /* Pas de puce */ line-height : 25px; /* définit une hauteur pour chaque élément */ } #menu a { /* Contenu des listes */ display : block; /* Les liens deviennent des balises de type block */ padding : 0; /* pas de marge intérieure */ color : #000000; /* couleur du texte */ border: 1px solid #000000; /* bordure noire complète */ text-decoration : none; background: url('images/5.jpg'); /* image de backgound*/ } #menu a:hover { /* Contenu des listes */ background: url('images/6.jpg'); /* image de backgound au survol*/ color : #8e8e8e; /* couleur du texte */ } #menu li { /* Éléments des listes */ float : left; /* Elements se suivant à gauche */ width : 120px; /* largeur cellules */ text-align:left; /* text aligné à gauche*/ text-indent: 5px; /* Indentation du texte de 5 pixels (décalage du texte à gauche */ } #menu li ul { /* Sous-listes */ position: absolute; width: 120px; /* largeur cellules */ left: -999em; z-index: 30; /* Permet de ne pas cacher le sous-menus, en cas de superposition de calques */ } #menu li ul a { /* Sous-listes */ background: url('images/7.jpg'); /* image de backgound au survol*/ } #menu li ul a:hover { /* Sous-listes */ background: url('images/8.jpg'); /* image de backgound au survol*/ color: #ffffff; } #menu li ul ul { margin: -25px 0 0 120px; /* décalage du sous-menu */ } #menu li:hover ul ul, #menu li.sfhover ul ul { left: -999em; } #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 img{ /* Images des listes */ padding-right: 5px; /* Marge de l'image à droite de 5 pixels */ border:0; vertical-align:middle; /* Alignement des images au milieu par rapport au texte */ width: 19px; /* Largeur des images */ height:19px; /* Hauteur des images */ }
Pour toutes questions: Forum
fouineur![]() ![]() |
|
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 :