ul#menu li ul {display: none;} 			/* On cache les sous éléments constituante */
ul#menu li:hover > ul {display: block;}	/* On affiche les éléments survolés par la souris */
ul#menu * {z-index: 100; }				/* Permet au menu de passer au dessus des autres éléments de la page */

ul#menu{
    margin: 0px 0px 10px 0px;			/* On ajoute un espace de 1px, en dessous du menu */
    width: 242px;						/* Définit la taille du menu*/
}
    
ul#menu, ul#menu ul{        			/* On selectionne le menu et les sous menus */
    list-style: none;                   /* Supprime les puces */
    border-top: solid 2px #eeBB88;  	/* On met des lignes en haut et bas des blocs "ul" */
    border-bottom: solid 2px #eeBB88;   /* On mettra ensuite des lignes à gauche à droite sur les elements "li" */
    background-color: #eeBB88;        	/* Couleur de fond du menu */
    margin:0px; padding:0px;            /* On supprime tout les espaces entre les menus */
}
    
ul#menu ul{
    margin: 0px;                        /* Enleve les marges de gauche, pour que le sous menu colle son parent */
    position: absolute;                 /* Permet de positionner le sous menu par rapport à son element parent */
    top: -1px;                          /* On remonte le sous menu de 1px, la hauteur de la bordure */
    left: 249px;						/* Le menu se place à 199px du bord droit, juste au dessus de la bordure du menu */
    width: 242px;						/* On définit la taille des sous menus à 250 */
}
    
ul#menu ul ul {left: 249px;}			/* Position des sous sous menus */

ul#menu ul ul ul {left: 249px;}			/* Position des sous sous sous menus */

ul#menu li{
/*    background-image: url(images/fdh1l200d2.jpg);	/* Image des fonds des elements non survolés */
/*    background-repeat: repeat-y;		/* L'image de fond ne se repete que selon l'axe y */
    background-color: #eeBB88;			/* Couleur de fond, cette couleur sera affiché aprés l'image */
    position: relative;					/* Permet de positionner le sous menu par rapport à son element parent */
    border-left: solid 1px #ececec; 	/* Ici on met les lignes à droite et gauche des elements du menu */
    border-right: solid 1px #eeBB88;	/* Lignes du menu */
    height:23px;line-height:22px;		/* On fixe la hauteur de l'element à 20px */
}

ul#menu li a{           
    display: block;						/* On ne peut pas mettre de largeur a un element inline */   
    width: 229px;						/* 250px du menu - 2*1px de bordure - 10px de padding */
    padding-left: 10px;					/* On ecarte le texte de 10px des bordures du menu */
    font-family: Times New Roman;
    font-weight: bold;					/* mise en gras du texte*/
    font-size: 15;						/* taille du texte 11 -> 15 */
    color: #11487B;						/* Couleur du texte */
    text-decoration:none;				/* Aura pour effet de supprimer la ligne du lien */
}

ul#menu li li a{width: 229px;}			/* les sous elements font 300px - 2*1px de bordure - 10px de padding */
 
* html ul#menu li a {display: inline-block;}	/* Hack pour IE pour forcer le texte à se positionner au milieu */

ul#menu li a:hover{
    background-image: url(images/);	/* Image des elements survolés */
    background-position: inherit bottom;/* L'arriere plan se trouve en bas  */
    background-repeat: repeat-x;		/* On affiche l'arriere plan seulement dans l'axe x */
/*    background-color:#f8ffff; 		/* Couleur de fond, la ou l'image d'arriere plan ne sera pas visible */      
    text-decoration: none;				/* On souligne le lien quand la souris passe au dessus*/
    color: #FF0099;						/* Couleur du texte */
    border-bottom: solid 1px #0000BB;	/* On met une ligne en haut et en bas */
    border-top: solid 1px #ffffff;		/* */
    line-height:21px;					/* On met la hauteur de la ligne à 18px pour tenir compte des 2px rajoutés par les bordures */
}
   
ul#menu li span{
    background-image: url(images/fleche-3.jpg); /* Image pour indiquer que cet element possede des sous elements */
/*    background-color:#f8ffff; 		/* Couleur de fond, la ou l'image d'arriere plan ne sera pas visible */      
    background-position: right center; 	/* l'image d'arriere plan se situe au milieu de ligne à a droite*/
    background-repeat: no-repeat;       /* l'image n'est affiché qu'une seule fois */
    display: block;                     /* Utile pour mettre du margin à droite */
    margin-right: 7px;                	/* laisse de la place à l'image si le texte est long */
}