/*http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php
body {behavior: url(csshover.htc);}
div#menu {width: 100px;}

/* fond blanc pour le menu 
div#menu a {color:#000000}
div#menu ul {padding: 0; width: 100px; border:1px solid; margin:0px; background: white}

/* fond different au survol de la souris pour les sous menu et les basiques 
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #EBB;}

/* Rajout d'une petite fleche pour les sous menu 
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat;}

div#menu ul li {position:relative; list-style: none; border-bottom:1px solid;}
div#menu ul ul {position: absolute; top: -1px; left: 100px; display:none}

/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 
div#menu li a {text-decoration: none; padding: 4px 0 4px 8px; display:block; border-left: 8px solid #BBB; width:84px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}

/* la bordure de chaque hauteur a une couleure de survol
div#menu li a:hover {border-left-color: red;}
div#menu ul ul li a:hover {border-left-color: #00FF00;}
div#menu ul ul ul li a:hover {border-left-color: #0000FF;}
*/




/* fichier pour internet explorer 
On insere ensuite dans le css un petit fichier qui va servir a internet explorer pour les proprietees hover 
(car il ne supporte pas les propriétées css2 on utilise donc les behavior ) 
Grace a ce petit fichier, on va pouvoir cacher ou montrer certaines parties du menu en fonction du survol 
de ceux ci par la souris. (hover). Il ne sera utilise que par ie, les autres navigateurs n auront pas besoin de js 
et avec la venu de ie7 il deviendra bientot inutile. 
On insere donc ce fichier dans le CSSt. Il suffit de le copier ensuite dans le meme repertoire que la page.
*/

body {behavior: url(css/csshover.htc);}

div#menu a {
	text-decoration: none;
}

div#menu {
	width: 200px;
	position: absolute;
	top:400px;
	left:0px;
	height:auto;
	z-index:199;
}

div#menu ul {
	padding: 0px; 
	margin:0px;
	width: 200px; 
    border:0px solid; /* taille de la bordure */
	border-color:#EDEDED; /*couleur encadrement */		
	color:#FFFFFF ; 
	background-color:#EDEDED; /* fond blanc pour le menu */
			 } 

/* fond des sous-menus :

div#menu li.sousmenu {background-color: #FFFFFF; }
 ajout d'un fond pour les sous-menus : image
div#menu li.sousmenu {background: url(../images/bordures/bg-ff9933.gif) 95% 50% no-repeat;} 

different au survol de la souris pour les sous menus et les basiques
div#menu li:hover {background-color: #BBBBBB;}
div#menu li.sousmenu:hover {background-color: #BBBBBB; }*/



/*On positionne les elements du menu */ 
div#menu ul li { 
                position:relative;
                list-style: none; /*on enleve les icones de liste */ 
                height: 25px; 
				color: #FFFFFF;
				padding: 0px; 
				margin:0px;
				background-color: #000000;	/* couleur bord droit sous menu */
               } 
			   
/* sous menus */ 
div#menu ul ul { 
                position: absolute; 
                top: 0; 
                left: 199px;/*120px correspond au decalage a droite, on décale de la taille du ul de base*/ 
				display:none; /* on cache tous les sous menus avec display none */ 
				width:200px;
              }  

/* on rajoute une bordure a gauche et des padding, on doit donc reajuster la taille 120-(8 de bordure + 8 de padding) =104 */ 
div#menu li a { 
               text-decoration:none; /* plus de soulignement pour les liens */ 
               padding: 6px 0px 6px 8px; 
               display:block; 
			   border-left:8px solid #000000; /* bordure gauche avec sa couleur */
			   color:#FFFFFF; /* couleur du texte des menu */
			   background-color:#000000; /* couleur du fond des menu */
			   width:180px;
			   height:auto;			   
              } 
div#menu li a:hover  { 
               text-decoration: underline;/* soulignement pour les liens passage avec souris */ 
			   font-weight:normal;  
              } 


/* lors du survol avec la souris les sous-menus apparaissent grace a display: block */ 
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}


/* la bordure de chaque hauteur a une couleur de survol*/ 
div#sousmenu :hover { 
					 color:#FFFFFF; 
					 background-color:#EDEDED;
                    } 

div#menu li a:hover { 
                     border-left-color:#FFFFFF; /* couleur de la bordure gauche des menu */
                    } 
div#menu ul ul li a:hover { 
                           border-left-color:#FFFFFF; 
                          } 
div#menu ul ul ul li a:hover { 
                              border-left-color:#FFFFFF; 
                             }