body {margin:0 ; padding:0}
#bande{
position:absolute;
top:170px;
left:0px;
z-index:0;
width:100%;
height:20px;
background-color:rgb(87,213,279);
}
.menu-general {float:left ; width:16% ; padding:0 ; margin: 0 ; height:20px }
#sous-menu1, #sous-menu2, #sous-menu3, #sous-menu4, #sous-menu5 ,#sous-menu6 {
display: none; /* par défaut, les sous-menus ne seront pas affichés */
margin: 0;
padding:0;
border-left:solid 1px #000000;
text-align:center;
position:absolute;
top:190px;
left:0;
width:16%}
#sous-menu2 {left:16%}
#sous-menu3 {left:32%}
#sous-menu4 {left:48%}
#sous-menu5 {left:64%}
#sous-menu6 {left:80%}
/************************************************************************************/
/* début de l'habillage du menu déroulant - On aurait pu rentrer cet habillage dans */
/* les #sous-menus1 2 ou 3, mais pour une meilleure lisibilité, on crée un style */
/* ".habillage", qu'on rajoute ensuite dans les appels des sous-menus. */
/************************************************************************************/
.menu-general {background-color:#57D5F9 ; color:black ; border:solid 1px black ; padding-left:0% ; padding-bottom : 0% ; font-weight:bolder ; font-style:italic ; text-align:center ; position:relative}
.habillage {font-size:9pt ; border:solid 1px black ; border-left:solid 1px #E7E4E4 ; background-color:#FFD5AA ; color:black ; text-align:center ; font-style:normal; font-weight:normal}
.habillage li {list-style:none ; border-bottom:solid 1px black ; height : 20px}
.habillage a {text-decoration:none}
.habillage a:hover {background-color : #AFB7D3}