Menu accordéon simplifié
En interne dans le HTML
Créer la liste imbriquée (dans notre cas la placer dans une div flottante à gauche, afin de pouvoir écrire
à droite)
Dans la feuille incorporée styler la liste de premier niveau
#mAc Attribuons à ul l'identifiant
id #mAc
padding:0, largeur 138px, hauteur 420px et une bordure pointillée pour la visualiser.
#mAc li Pas de puces, décalage
vertical par une bordure transparente 2px
#mAc li a Display:block, L120px, H 20px, texte clair centré vertic.
indenté10px, Fond marron
#mAc li a:hover Fond plus clair, texte foncé
Contrôler l'apparition des sous-menus
L'affichage des sous-menus est provoqué par le survol du li de premier niveau et non par celui de a. Le
survol de a ne sert qu'à contrôler le changement de décoration.
#mAc li ul au repos de li les sous menus ne sont pas affichés par
display:none
#mAc li:hover ul à l'état survolé de li les sous-menus sont affichés par
display:block. Nous les plaçons bien sous les li par une marge gauche nulle.
Styler la liste de deuxième niveau
#mAc li:hover ul li a Indentation du texte à 20px. Donner une décoration
différente aux éléments de sous-menus quand l'accordéon s'ouvre
#mAc li:hover ul li a:hover pour en changer légèrement au survol (couleur du
texte uniquement)