TP : un Menu sobre et sérieux

Voici ce menu dont vous pourrez retrouver rapidement l'origine :

et son encodage HTML (ATTENTION, Editer le code source pour bien retrouver les classes et les id) :

Voici la liste des sélecteurs suggérés pour votre feuille de style

Les éléments graphiques sont puisé

Voici quelques indications :

Les déclarations initiales

body :
famille de caractères Arial, 13px
a :
  • couleurs #069, non soulignés
  • hauteur de ligne de 35px,
  • la propriété white-pace: nowrap nous permettra la tenue des lignes
les éléments de liste li,ul,ol :
sans puces, ni margin, ni padding, ni bordure, ni arrière-plan, avec un alignement vertical centré

En suivant les imbrications du plus gros conteneur au plus fin :

.global :
centrage de la page pour une largeur fixe de 980px
.wrapper :
image d'arrière-plan (voir)
.nav :
ajustement des marges de la barres de navigation
.nav>li
  • transcrire le cours pour les sous-menus déroulants
  • marges
.nav>li>a
  • pour ces entêtes, a est en bloc,
  • hauteur de ligne de 35px,
  • padding
.nav>li:hover
  • transcrire le cours pour les sous-menus déroulants
  • bordure haut,gauche et droite de couleur #016799
  • ombrage (box-shadow) si vous le pouvez
  • marges
.nav>li:hover>a
 
  • encore position relative avec z-index:50 pour produire l'effet d'onglet,
  • arrière-plan,
  • padding
.nav>li>ul
transcrire le cours pour les sous-menus déroulants
.nav>li:hover ul
transcrire le cours pour les sous-menus déroulants
.nav>li>ul>li a
d'autres choses à trouver seul
.nav>li>ul>li a:hover
d'autres choses à trouver seul

le corrigé source et css