@charset "utf-8";
/* CSS Document */

/*Nous allons commencer par toutes les éventuelles marges entre les éléments de la page par défaut*/
/** signifie "tous les éléments"*/
*{
	padding:0;
	margin:0;
} 

/*Puis nous allons définir une police d'écriture par défaut : le verdana, et une taille de caractère par défaut pour le texte du "body", c'est-à-dire le corps de la page html.*/
body {
font-size:62.5%; 
font-family:verdana,arial,sans-serif;
} 

/*Pour ce qui est de l'élément "menu", nous allons :
- le faire flotter (ou aligner) à gauche,
- mettre une largeur de 900 pixels (width:900px;) mais c'est à adapter à la largeur de votre site,
- enlever toute éventuelle bordure (border:none;),
- mettre une couleur de fond grise (background:rgb(225,225,225);), mais là encore c'est pour l'exemple,
- mettre une couleur d'écriture noire (color:rgb(0,0,0);),
- mettre une taille de police d'écriture un peu plus grande que la taille standard, à 130%. (font-size:130%;),
- ajouter une ligne white-space:nowrap; pour Internet Explorer, qui permet de supprimer tout éventuel saut de ligne. */
.menu {
	white-space:nowrap /*IE hack*/;
	float:left;
	width:760px;
	border:none;
	background:rgb(225,225,225);
	color:rgb(75,75,75);
	font-size:130%;
	margin-top: 10px;
	margin-bottom: 10px;
}

/*Attaquons maintenant la balise "ul" contenue dans le menu. Nous allons juste lui indiquer le type de liste que nous voulons, car je rappelle que cette balise est faite à la base pour créer des listes. Nous allons mettre "none" pour n'en définir aucune, afin qu'il n'y ai aucun point, carré ou autre devant chaque ligne de la liste des menus : */
.menu ul {
list-style-type:none;
}

/*Pour chaque élément "li" de la liste, nous allons :
- le faire flotter (ou aligner si vous préférez) à gauche,
- indiquer que les éléments du menu doivent être au dessus de tout autre élément avec z-index. z-index:auto !important; va le faire en automatique sur Firefox et autres navigateurs (sauf IE6), z-index:1000 va permettre de mettre une valeur très élevée pour Internet Explorer qui prendre mal l'automatique,
- mettre une bordure grise à droite de chaque élément pour les séparer*/
.menu ul li {
float:left; 
z-index:auto !important /*Non-IE6*/; 
z-index:1000 /*IE6*/; 
border-right:solid 1px rgb(175,175,175);
}

/*Nous allons nous occuper du style des liens, car pour le moment ils restent dans un style standard. Pour accéder aux liens nous pouvons utiliser .menu ul li a. Nous allons :
- Enlever tout flottement sauf pour IE6,
- pour IE6 nous allons spécifier un float:left pour repréciser que les liens doivent s'aligner à gauche,
- mettre un display:block; qui va permettre au lien de prendre toute la largeur de sa case parente (pas besoin de survoler uniquement le texte du lien),
- mettre un hauteur de ligne de 3.1em avec height:3.1em; et line-height:3.1em;,
- mettre des espacements pour éloigner le texte du bord de : 16 pixels à droite et 16 pixels à gauche avec padding:0 16px 0 16px;,
- enlever tout éventuel soulignement du lien avec text-decoration:none;,
- mettre le lien en gras avec font-weight:bold;,
- mettre la couleur du lien en gris foncé avec color: rgb(100,100,100); (code couleur RGB du gris foncé que j'ai choisi). */
.menu ul li a {
float:none !important /*Non-IE6*/; 
float:left /*IE-6*/; 
display:block; 
height:3.1em; 
line-height:3.1em; 
padding:0 16px 0 16px; 
text-decoration:none; 
font-weight:bold; 
color: rgb(100,100,100);
}

/*Le display:none; va demander aux sous-menus de ne pas s'afficher pour le moment, et le border:none; va enlever toute bordure éventuelle*/
.menu ul li ul {
display:none; 
border:none;
}

/*petite astuce pour Internet explorer, qui est de mettre position:relative; dans les .menu ul li:hover, car IE risque de décaler vos éléments si vous passez la souris dessus*/
.menu ul li:hover {
position:relative;
}

/*Ensuite nous allons changer la couleur de fond d'une cellule lorsque la souris est sur un élement de menu, en gris plus foncé par exemple*/
.menu ul li:hover a {
background-color:rgb(210,210,210); 
text-decoration:none;
} 

/*Nous allons maintenant mettre un peu de style sur les balises "<ul>" des sous-menus. Attention, celles-ci sont imbriquées, pour y accéder vous pouvez donc utiliser .menu ul li:hover ul. Ceci signifiera que lorsque la souris est sur un menu, le sous-menu aura le style suivant.
Explications :
- nous allons demander au lien sur le sous-menu de prendre toute la case parente avec display:block;,
- pour les sous-menus nous allons mettre une largeur un peu grande de width:10.0em; par exemple,
- nous allons mettre les sous-menus en position absolue position:absolute; afin de régler leur hauteur à 3.0em (top:3.0em;) et gauche à 0 (left:0;), alignement d'axe z sous les menus (z-index:999;) et marge de hauteur à 0.1em (margin-top:0.1em;). Cela va permettre de les placer juste sous les menus principaux */
.menu ul li:hover ul {
display:block; 
width:10.0em; 
position:absolute; 
z-index:999; 
top:3.0em; 
margin-top:0.1em; 
left:0;
}

/*Lorsque la souris est sur un menu, nous allons maintenant configurer le style des liens des sous-menus, car si vous allez dessus vous remarquerez encore un comportement bizarre. Nous allons mettre :
- white-space:normal; pour rétablir les retours à la ligne éventuels,
- display:block; pour que les liens sur les sous-menus prennent toute la case parente,
- une largeur de 10em avec width:10.0em;,
- une hauteur de ligne de 1.3em avec line-height:1.3em;,
- une marge gauche à -1px pour décaler un peu vers la gauche les liens avec margin-left:-1px; ,
- un espacement des liens par rapport à leurs cellules de 4px en haut et en bas, 16px à gauche et à droite,
- une bordure à gauche et en bas avec border-left:solid 1px rgb(175,175,175) et border-bottom: solid 1px rgb(175,175,175),
- une couleur de fond un peu plus foncée que celle des menus principaux avec background-color:rgb(237,237,237),
- une police normale en grosseur et en couleur.*/
.menu ul li:hover ul li a {
white-space:normal; 
display:block; 
width:10.0em; 
height:auto; 
line-height:1.3em; 
margin-left:-1px; 
padding:4px 16px 4px 16px; 
border-left:solid 1px rgb(175,175,175); 
border-bottom: solid 1px rgb(175,175,175); 
background-color:rgb(237,237,237); 
font-weight:normal; 
color:rgb(50,50,50);
}

/*Maintenant lorsque la souris est sur un sous-menu, nous allons changer la couleur de fond de la case*/
.menu ul li:hover ul li a:hover {
background-color:rgb(210,210,210); 
text-decoration:none;
}

/*Sur Internet Explorer 6, à ce stade, les sous-menus ne s'affichent toujours pas. Nous allons donc ajouter du code CSS spécial pour IE6, mais avant cela nous allons également ajouter du code HTML pour IE6 car tout code CSS ajouté serait aussi interprété par les autres navigateurs bien entendu.
Nous allons donc utiliser la possibilité offerte avec le code html de type "[if IE 7]>>" qui permet d'ajouter du code qui ne sera exécuté que par les navigateurs indiqués.*/


/*IE6: nous allons agir sur le tableau créé pour IE6 et ajouter une position absolue à 0 en hauteur et à gauche*/
.menu table {
position:absolute; 
top:0; 
left:0; 
border-collapse:collapse;
}

/*Nous allons maintenant mettre en couleur le fond d'une celleule de menu lorsque la souris est dessus en mettant ici un background-color:rgb(210,210,210);. Tout le reste on le remet par précaution pour rappeler que la position est relative, l'alignement sur l'axe des Z est à 1000 et que les liens ne doivent pas être soulignés :*/
.menu ul li a:hover {
position:relative /*IE hack*/; 
z-index:1000 /*IE hack*/; 
background-color:rgb(210,210,210); 
text-decoration:none;
}

/*Maintenant on va dire au bloc <ul> des sous-menus de :
- s'afficher en display:block;,
- prendre une largeur de 10em avec width:10.0em;,
- être en position absolue pour définir la hauteur à 3.1em, gauche à 0, et une marge en haut à 0.1em, comme on l'avait fait pour les autres navigateurs avant. */
.menu ul li a:hover ul {
display:block; 
width:10.0em; 
position:absolute; 
z-index:999; 
top:3.1em; 
left:0; 
margin-top:0.1em;
}

/*On va maintenant mettre en forme les liens des sous-menus, avec à peu près les mêmes réglages pour IE6 que pour les autres navigateurs, je ne réexplique donc pas tout :*/
.menu ul li a:hover ul li a {
white-space:normal; 
display:block; 
width:10.0em; 
height:1px; 
line-height:1.3em; 
padding:4px 16px 4px 16px; 
border-left:solid 1px rgb(175,175,175); 
border-bottom: solid 1px rgb(175,175,175); 
background-color:rgb(237,237,237); 
font-weight:normal; 
color:rgb(50,50,50);
}

/*

Il reste à mettre une couleur de fond de cellules lorsque la souris passe sur un sous-menu, on va mettre comme tout à l'heure */
.menu ul li a:hover ul li a:hover {
background-color:rgb(210,210,210); 
text-decoration:none;
} 

/*Pour finir, mais c'est optionnel, vous pouvez aussi définir un style pour l'impression papier de votre page avec @media print. Cela permettra de mettre une couleur et taille de police, couleur de fond du menu, etc. à l'impression de la page : */
@media print {.menu {float:left; width:900px; border:none; background:rgb(240,240,240); color:rgb(75,75,75); font-size:1.0em; font-size:130%;}}