Nous voulons un menu horizontal déroulant qui puisse s'afficher sur l'image d'arrière plan du header

body header h1
margin: 0 auto;
width: 900px;
font-family: Arial,Helvetica,sans-serif;
background-color: #606d76;
height: 290px;
background-image: url(images/bg-header-900x290.jpg);
background-repeat: no-repeat;
color: #ffe6e4;
font-weight: normal;
font-size: 2.3em;
text-align: left;
margin-left: 160px;
margin-top: 40px;

Menu horizontal déroulant

structure de la page étape1

Eléments de premier niveau

bloc menuH : mettre tous les margin et paddings à zéro, supprimer les puces type (étape 1)
Faire des liens inactifs uniquement sur les éléments de 2ème niveau

li de premier niveau (étape 2)
ils auront une position relative pour servir de référence quand nous décalerons les élémernts de 2ème niveau.
Ils seront à l'horizontale par un flottement à gauche mais avant il est souhaitable de supprimer le flottement du bloc suivant  #content.
Il n'y a pas de lien dans ces éléments donc le stylage pour le positionnement et la décoration s'applique à li et non pas à a.
Par la suite nous donnerons une bordure basse pleine transparente pour séparer visuellement les blocs.
Les éléments de 2ème niveau hériteront des styles de leur parent li y compris cette bordure.

#menuH #menuH li
padding: 0;
margin-right: 0;
margin-bottom: 0;
list-style-type: none;
height: 20px;
background-color: #3a4147;
margin-top: 30px;
border-bottom: 4px solid transparent;
position: relative;
margin-right: 10px;
width: 100px;
text-align: center;
font-weight: bold;
font-style: italic;
float: left;
height: 20px;
color: #ffe6e4;
line-height: 20px;

Eléments de deuxième niveau

#menuH li ul #lmenuH li:hover ul #menuH li a
list-style-type: none;
left: -40px;
position: relative;
display: none;
border-top: 4px solid transparent;
display: block; display: block;
background-image: url(images/bg-li-a-100x20.png);
color: #ffe6e4;
text-decoration: none;

A l'étape 3, après avoir supprimé les puces type, nous donnons la position relative aux éléments de 2ème niveau, et annulons le décalage par défaut en leur donnant un décalage négatif gauche -40px pour les positionner juste sous les li flottants correspondants.
Pour que le menu se déroule correctement, le pointeur de la souris doit toujours se trouver sur un des éléments. S'il y a discontinuité entre les blocs, le déroulement ne peut pas se produire. Si nous voulons séparer visuellement les blocs nous pouvons leur appliquer une bordure haute pleine de couleur  "transparent".

Etape 2 Etape 3
structure étape2 structure étape3
  1. #menuH li ul  pas de puces, position relative et décalages négatifs gauche. Bordure haute transparente.
    Le non affichage par display:none ne sera appliqué qu'à la fin pour continuer à voir ce que l'on fait.
  2. #menuH li:hover ul  à l'état survolé des li , affichage des éléments de 2ème niveau par  display:block
  3. structure étape4#menuH li a  A l'étape 4 nous transformons les liens du 2ème niveau en blocs afin de pouvoir les styler. Ils héritent de beaucoup de propriétés de leur parent li premier niveau. Nous pouvons leur donner une image d'arrière plan semi transparente ce qui permet de moins cacher l'arrière plan du header. 
  4. Si nous ne l'avons pas encore fait 
    • positionner verticalement le menu dans le bloc header suivant le nombre d'items à dérouler
    • donner une hauteur et les couleurs de texte et d'arrière plan à #menuH
  5. Rendre réactifs les liens survolés par soulignement et changement de couleur.
Haut de page