/* CSS Document copyright: Patrice Christien */
/* on cache toutes balises ul enfants d'une li*/  
#menuContainer{
  margin-left: auto;
  margin-right:auto;
  margin-top: auto;
  width: 700px;
  height:30px;
  margin: 0 auto;*/

}
#menu {
  FLOAT: left;
  WIDTH: 100%;
}
#menu UL {
  PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px; 
  PADDING-BOTTOM: 0px; 
  PADDING-TOP: 0px;   
  FLOAT: left;  
  MARGIN: 0px;
  WIDTH: 60px; 

  LIST-STYLE-TYPE: none
}
#menu A {
  /* couleur d'un lien par defaut*/ 
  background:  #a5a2d7;
  BORDER-LEFT: #800000 1px solid;
  BORDER-RIGHT: #800000 1px solid;
  BORDER-TOP: #800000 1px solid;
  BORDER-BOTTOM:  #800000 1px solid;
  PADDING-RIGHT: 3px;    
  DISPLAY: block; 
  PADDING-LEFT: 0px;
  PADDING-RIGHT: 0px;  
  PADDING-BOTTOM: 0px; 
  MARGIN: 0px; 
  FONT: bold 11px/22px arial, helvetica, sans-serif; 
  PADDING-TOP: 2px; 
  text-align:center;
  }
#menu A {
	/* couleur d'un lien par defaut*/ 
  background:  #fefced;  
  COLOR: #800000; 
  TEXT-DECORATION: none;

}
#menu A:hover {
  BACKGROUND: #800000;
  COLOR: #fef5e2;
}
#menu A.bas{
background-image:  url(http://www.french-treasures.net/icones/flecheBas.gif);  
background-position: 50% 105%;
background-repeat: no-repeat;
}
/* affiche la fleche directionnelle bas  */  
#menu A.bas:hover{
background-image:  url(http://www.french-treasures.net/icones/flecheBasLien.gif);
background-position: 50% 120%;
background-repeat: no-repeat;
} 
 /*affiche la fleche directionnelle droite suivant l'id */
#menu A.droite{
background-image:   url(http://www.french-treasures.net/icones/flecheDroite.gif);
background-position: 97%;
background-repeat: no-repeat;
}
#menu A.droite:hover{
background-image:   url(http://www.french-treasures.net/icones/flecheDroiteLien.gif);
background-position: 97%;
background-repeat: no-repeat;
}
#menu LI {
	POSITION: relative;
}
#menu UL UL {
  WIDTH: 150px; 
  POSITION: absolute;
  LEFT:5px;
  PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px; 
  PADDING-BOTTOM:0px; 
  PADDING-TOP: 0px;
}
#menu UL UL UL {
  WIDTH:150;
  Z-INDEX: 900; 
  LEFT: 100%; 
  POSITION: absolute; 
  TOP:0px;
  RIGHT:5px;
  PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px; 
  PADDING-BOTTOM:0px; 
  PADDING-TOP: 0px;
}
#menu UL UL {
	DISPLAY: none
}
#menu li:hover>ul{
  display:block;
}
<!--[if IE]>
<STYLE type=text/css media=screen>BODY {
	FONT-SIZE: 100%; BEHAVIOR: url(csshover.htc)
}
#menu UL LI {
	FLOAT: left; WIDTH: 100%
}
#menu UL LI A {
	HEIGHT: 1%
}
</STYLE>
<![endif]-->