.menu 
{
  width:auto;
  position:relative;
  font-family:Arial, Verdana, sans-serif;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul 
{
  padding:0;
  margin:0;
  list-style-type:none;
}
.menu ul ul 
{
  width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li 
{
  float:left;
  top:-0px;
  position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited 
{
  display:block;
  font-size:12px;
  text-decoration:none; 
  TEXT-ALIGN: center;
  color:#fff;
  width:130px;
  height:20px;
/*  border:1px solid #000;*/
  background:#808080;
  line-height:21px;
  font-weight:bold;
}
 
/* couleur de fond de quelque chose */
.menu ul ul a.drop:hover
{
  background:#000000;
}

/* couleur de fond du 2e level (quand il y a un 3e level) */
.menu ul ul a.drop, .menu ul ul a.drop:visited 
{
  background:#909090  url(/lib/menu/grey-arrow.gif) no-repeat 150px center;
  line-height:12px;
  height: 12px;
}
/* couleur de fond du 3e level */
.menu ul ul ul a, .menu ul ul ul a:visited 
{
  background:#909090;
  line-height:10px;
  height: 10px;
  font-size:11px;
}
/* couleur de fond du 3e level quand on passe la souris dessus */
.menu ul ul ul a:hover 
{
  background:#C0C0C0;
}
/* couleur de fond du 2e level (quand il y a un 3e level) et quand on passe la souris dessus */
.menu ul ul :hover > a.drop 
{
  background:#C0C0C0 url(/lib/menu/grey-arrow.gif) no-repeat 150px center;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul 
{
  visibility:hidden;
  position:absolute;
  height:0;
  top:20px;
  left:0; 
}
 
/* position du 3e level qui apparait a droite */
.menu ul ul ul
{
  left:170px;
  top:-0px;
  width:509px;
}
/* position du 3e level qui apparait a gauche */
.menu ul ul ul.left 
{
  left:-220px;
}
 
/* style du 2e level */
.menu ul ul a, .menu ul ul a:visited 
{
  TEXT-ALIGN: left;
  background:#909090; 
  color:#FFFFFF; 
  height: 12px; 
  line-height:1em; 
  padding:5px 10px; 
  width:150px;
  border-width:0px 0px 0px 0px;
}
 
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover
{
  color:#000; 
  background:#000000;
}
/* style du 1er level quand on passe la souris dessus */
.menu :hover > a, .menu ul ul :hover > a 
{
  color:#000;
  background:#C0C0C0;
}
 
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}