Menu horizontal déroulant
Les sous menus en position absolute se déroulent sans déplacer les éléments situés dessous.
-
div id="menu" Dans une div nous construisons notre liste imbriquée et
dans la feuille de style incorporée nous attibuons à cette div des dimensions suffisantes 750x30 ainsi que
des marges haute et basse de 30px et nous la centrons par des marges automatiques.
-
#menu ul Pour la liste de premier niveau nous supprimons
les décalages de margin et padding par défaut en les mettant à zéro.
-
#menu li Nous attribuons à tous les éléments de liste
premier niveau des dimensions convenables 125x35, pas de puces et les propriété
float:left, position:relative (pour servir de référence aux sous-menus en
position absolute)
- #menu li a Nous faisons les liens et donnons à la propriété
display:block , les dimensions 120x30, une hauteur de ligne de 30, une couleur de texte jaune et
pas de soulignement
- En survolé les textes seront jaune très clair
-
Deuxième niveau au repos #menu ul li ul pas
d'affichage par display:none
-
#menu ul li:hover ul à l'état survolé , affichage par
display:block. Pour positionner ces sous-menus nous leur attribuons la position:relative
et des décalages top:35 et left :0
-
#menu li:hover ul li Pour les éléments des menus de deuxième niveau à
l'état survolé de l'élément correspondant de premier niveau nous supprimons le flottement à gauche.
-
#menu ul li.Accueil a
-
#menu ul li.Accueil a:hover Dans la feuille de style, pour chaque
élément de menu du premier niveau nous créons une classe à l'état repos et une autre à l'état survolé
pour changer la couleur de l'arrière plan. Dans le HTML nous attribuons la class .Accueil
au premier élément du menu premier niveau et à tout le sous menu correspondant et ainsi de suite pour les
autres.