/* Barre de menu principal */
#menu
{
	width: 100%;
	margin: 0;
	padding: 10px 0 0 0;
	list-style: none;  
	/*background: chocolate; /*#111;*/
	background: linear-gradient(#444, #111);
	/*border-radius: 50%;*/
	box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
	line-height: 0;
}

#menu a 
{
	float: left;
	height: 25px;
	padding: 0 25px;	/* espace de 25 pixels à droite de chaque option du menu principal */
	color: #999;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}

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

#menu li:hover > ul
{
	display: block;
}

/* Sub-menu */
#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: linear-gradient(#444, #111);
    box-shadow: 0 0 2px rgba(255,255,255,.5);	
    border-radius: 5px;
}

#menu ul ul
{
  top: 0;
  left: 150px;
}

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

#menu ul li:last-child
{   
    box-shadow: none;    
}

#menu ul a
{    
    padding: 10px;
	height: 10px;
	width: 130px;
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
	text-transform: none;
}

#menu ul a:hover
{
    background: #0186ba;
	/*background: linear-gradient(#04acec,  #0186ba);*/
}

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

/* Afficher un triangle pour relier le sous-menu au menu de façon visuelle 
L’astuce permettant la création du triangle via CSS est l’utilisation de la propriété border. 
Quand nous appliquons une bordure de chaque côté d’un élément, l’intersection entre chaque bordure forme un angle à 45 degrés.
La bordure ainsi créée est formée par 4 triangles.
Pour ne garder que le triangle du bas, il suffit de rendre transparentes les autre bordures
*/
#menu ul li:first-child > a::after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul ul li:first-child a::after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}

#menu ul li:first-child a:hover::after
{
    border-bottom-color: #04acec; 
}

#menu ul ul li:first-child a:hover::after
{
    border-right-color: #04acec; 
    border-bottom-color: transparent; 	
}

#menu ul li:last-child > a
{
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after 
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}