Le texte placé dans le contenu ne se se déplace pas avec le déroulement des sous-menus car les sous-menus sont en position absolute.
L'opacité des arrières plans a été réduite à 0.748%
Les icônes des arrières plans des sous-menus sont de la même teinte que les textes au repos et survolés.
Il convient de limiter le nombre de couleurs.
Bordures latérales noires solid 1 px pour tous les li des sous-menus et (dans le html) bordure basse pour le dernier li de chaque sous-menu.
Faire 2 images pour chaque li de sous-menu : une pour l'état normal et une autre pour l'état survolé
html { background-color: #990000; }
body { width: 900px; margin-right: auto; margin-left: auto; margin-top: 0; font-family: Arial,Helvetica,sans-serif;
font-size: 1em; background-color: #cccccc; }
#header { background-image: url(images/canigou.jpg); background-repeat: no-repeat; background-position: center center; height: 100px; }
#content { width: 800px; margin-right: auto; margin-left: auto; height: 1220px; }
#footer { background-image: url(images/vingrau.jpg); width: 900px; height: 75px; }
h1 { color: #990000; margin-top: 0; padding-top: 10px; margin-left: 300px; }
ol, ul { margin: 0; padding: 0; }
Construire la liste imbriquée dans le html (penser à l'outil Nettoyeur de balises) et faire les liens
Construire le menu en passant par 3 étapes :
- Etape 1 : Faire un menu vertical accordéon
- Etape 2 : Le transformer en menu horizontal déroulant et le placer dans l'en-tête
- Etape 3 : Décoration : couleurs, bordures, fonds, transparence
Premier niveau
#menu { height: 30px; margin-right: auto; margin-left: auto; width: 460px; }#menu li { margin: 0; list-style-type: none; float: left; position: relative; }
#menu li a { width: 150px; height: 30px; display: block; line-height: 30px; text-decoration: none; text-indent: 40px; font-weight: bold; color: #990000; }
#menu li a:hover { color: #ff6666; }
Deuxième niveau
#menu li ul { display: none; }#menu li ul li { float: none; }
#menu li:hover ul { display: block; position: absolute; }
#menu li:hover ul li a { border-left: 1px solid black; border-right: 1px solid black; width: 150px; text-indent: 30px;
background-color: #d9deea; font-weight: normal; opacity: 0.748; }
#menu li:hover ul li a:hover { color: #ff6666; }
.fd_w a { background-image: url(images/forme1.png); background-repeat: no-repeat;
background-position: left center; }
.fd_w a:hover { background-image: url(images/forme1Surv.png); background-repeat: no-repeat;
background-position: left center; }
.fd_x a { background-image: url(images/forme2.png); background-repeat: no-repeat;
background-position: left center; }
.fd_x a:hover { background-image: url(images/forme2Surv.png); background-repeat: no-repeat;
background-position: left center; }
.fd_y a { background-image: url(images/forme3.png); background-repeat: no-repeat;
background-position: left center; }
.fd_y a:hover { background-image: url(images/forme3Surv.png); background-repeat: no-repeat;
background-position: left center; }
.fd_z a { background-image: url(images/forme4.png); background-repeat: no-repeat;
background-position: left center; }
.fd_z a:hover { background-image: url(images/forme4Surv.png); background-repeat: no-repeat;
background-position: left center; }