Menu horizontal déroulant

Créer une liste imbriquée dans le bloc header et passer l'outil nettoyeur de balises
Attribuer à la liste de premier niveau l' id #menuH

Structure étape 1 : création des blocs

#menuH : mettre tous les margins et paddings à zéro et  supprimer les puces type.
A la fin nous positionnerons ce bloc menu sur l'image d'arrière plan du header par des marges haute et gauche

étape 1 : créer les blocs #menuH #menuH li #menuH li ul
étape1 : créer les blocs margin: 0;
padding: 0;
list-style-type: none;
position: relative;
float: left;
width: 120px;
height: 20px;
background-color: #cccccc;
margin-right: 20px;
margin: 0;
padding: 0;
position: relative;
list-style-type: none;

Pour pouvoir construire le menu horizontal sans être géné, supprimer le flottement au niveau du bloc suivant.

#menuH li :  position relative, flottement à gauche, leur donner dimensions, marge droite et une couleur d'arrière plan provisoire
#menuH li ul : mettre tous les margins et paddings à zéro, supprimer les puces type, position relative.

Créer des liens inactifs uniquement sur les éléments de deuxième niveau

Structure étape 2 : au survol de la souris sur li de premier niveau

#menuH li:hover ul : rétablir au survol l'affichage bloc pour les listes 2ème niveau
#menuH li ul : pas d'affichage lorsque les li de premier niveau ne sont pas survolés

#menuH li ul a : affichage bloc, pas de soulignement, couleur d'arrière plan provisoire,
bordure haute pleine de 2 px pour séparer visuellement les blocs

étape 2 : affichage des blocs #menuH li ul #menuH li:hover ul #menuH li ul a
Affichage ou non des blocs margin: 0;
padding: 0;
float: none;
position: relative;
list-style-type: none;
display: none;
display: block; display: block;
background-color:#999999;
text-decoration: none;

voir le fonctionnement de cette  structure

#menuH li ul a:hover : rendre les liens survolés réactifs par modification de la couleur du texte et de l'arrière plan

Séparer visuellement les blocs liens par une bordure haute pleine

bordure tranparente onglet bordure

Récapitulation des règles CSS finales

#menuH #content #menuH li #menuH li ul
margin-left: 100pt;
padding-left: 0;
list-style-type: none;
color: #25649e;
margin-top: 142px;
clear: both; float: left;
width: 120px;
height: 20px;
margin-right: 20px;
text-align: center;
position: relative;
background-color: #dfc491;
line-height: 20px;
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
display: none;

#menuH li:hover ul #menuH li ul a #menuH li ul a:hover
display: block; display: block;
color: #25649e;
text-decoration: none;
border-top-style: solid;
border-top-width: 2px;
float: none;
color: #184167;
background-color: #fce6b5;