#navi{
font-size:1.1vw;
z-index:90;
width:100%;
left:0px;
position:fixed;
top:0;
margin:0;
background-color:black;
color:white;
}

#menu  /*barre de menu*/{		
position:relative;
width: 100%;
list-style: none;  
border-radius: 10px;
text-align:center;
}

#menu li /*enfant (premieres boites au survol)*/{
padding-right:10px;
float: left;	
margin:0px;
position: relative;
line-height: 0;
width:auto;
background-color:black;
}

#menu a /*Nom des cases*/{
display:block;
float: left;
color: #ddd;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px 0 #000;
margin:1px;
padding:0.22vw;
word-wrap:break-word;
}

#menu li:hover > a /*illumination*/
{color: #fafafa;}


/* Sous-menu */

#menu ul /*sous menu*/{
list-style: none;
margin: 0;
padding: 0;    
display: none; /*Cache*/
position: absolute; /*sinon les boites reagissent en fonction des autres*/
top: 0.9vw;
left: 0;
z-index: 99999;    	
border-radius: 5px;
width:100%;
}

#menu li:hover > ul /*affichage enfant au survol (affiches les premieres boites)*/
{display: block;}

#menu ul ul /*enfant de sous menu sur la gauche le volet deroulant*/{
top: 0;
left: 100%;
}

#menu ul li /*les carres dans les boites*/{
float: none;
margin: 0;
padding: 0;
display: block;  
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
width:auto;
}

#menu ul li:last-child /*on enleve les effets d'ombre*/
{box-shadow: none;}

#menu ul a /*titre sous menu*/{    
padding: 5px 0px 5px 5px;
height: auto;
line-height: 1;
display: block;
white-space: normal;
float: none;
text-transform: none;
transition-duration:0.3s;
}

#menu ul a:hover /*Coloration au survol*/
{opacity:0.9; text-shadow:2px 2px 10px #FFF;}

#menu ul li:first-child > a /*arrondi les premiers bords*/
{border-radius: 5px 5px 0 0;}


#menu ul li:last-child > a /*arrondi les derniers bords*/
{border-radius: 0 0 5px 5px;}

/* Plus aucun element flottant*/
#menu::after /*on cache tout*/{
visibility: hidden;
display: block;
font-size: 0rem;
content: " ";
clear: both;
height: 0;
}