Menu déroulant dans le header

  1. body 700px de large, centréStylage menuH
  2. Nous construisons le menu dans le content et le déplacerons ensuite dans le bas du header en passant par le code.
  3. Nous faisons notre liste imbriquée et attribuons à ul l'identifiant menuH, nous faisons des liens inactifs et stylons les éléments dans la feuille de style externe.
  4. Pour tout le site, les liens a ne sont pas soulignés alors que les liens survolés a:hover le sont.
  5. Liste de premier niveau  #menuH   nous supprimons les puces et nous supprimons les décalages de margin et padding par défaut en les mettant à zéro.
    Par la suite nous positionnerons le bloc dans le header par une marge haute 13px et gauche 18px (quand il sera horizontal).
  6. #menuH li  Nous attribuons à tous les éléments de liste premier niveau des dimensions convenables 100x20px,  texte centré,  la propriété float:left, la propriété position:relative (pour servir de référence aux sous-menus eux aussi en position relative), une marge droite de 5px pour séparer les items latéralement, une bordure basse solid 4px transparent pour les séparer verticalement.
  7.  #menuH li a Nous donnons aux liens la propriété display:block , les mêmes dimensions que li : 100x20, une hauteur de ligne de 20, texte centré
  8. Deuxième niveau  au repos  #menuH li ul  pas d'affichage par display:none
  9. #menuH li:hover ul  à l'état survolé , affichage par  display:block, pas de puces.
    Pour positionner ces sous-menus nous leur attribuons la position:relative et des décalages négatifs left :- 41px et bottom:- 4px

Haut de page