div.menu 
  {
  z-index:100;
  height: 27px;
  position: relative;
  }   

/* remove all the bullets, borders and padding from the default list styling */
div.menu ul 
  {
  padding:0;
  margin:0;
  list-style-type:none;    
  }     
  
div.menu ul ul 
  {
  width:88px;
  } 
  
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

div.menu li 
  {
  float:left;
  position:relative; 
  width: 88px;
  }   
  
/* style the links for the top level */

div.menu a, div.menu a:visited 
  {
  display:block;
  font-size:10px;
  text-decoration:none; 
  color:#fff; 
  height:27px; 
  background:#808080; 
  text-align: center; 
  padding: 0px;
  margin: 0px;
  line-height:28px;
  border-right: solid 1px white; 
  }
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:102px;
w\idth:102px;
} 

/* style the second level background */
div.menu ul ul a.drop, div.menu ul ul a.drop:visited 
  {
  background:#7b1d5f bottom right no-repeat;   
  }  
  
/* style the second level hover */
div.menu ul ul a.drop:hover
  {
  background:#7b1d5f bottom right no-repeat;
  border-top: solid 1px white; 
  border-bottom: solid 1px white;
  } 

div.menu ul ul :hover > a.drop 
  {
  background:#7b1d5f url bottom right no-repeat; 
  border-top: solid 1px white; 
  border-bottom: solid 1px white;
  }    

/* hide the sub levels and give them a positon absolute so that they take up no room */
div.menu ul ul 
  {
  visibility:hidden;
  position:absolute;
  height:0;
  top:27px;
  left:0; 
  } 
      
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
div.menu ul ul a, div.menu ul ul a:visited 
  {
  background:#343465; 
  color: white; 
  height: auto;
  padding:0px; 
  border-top: solid 1px white; 
  width: 140px;
  }
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:140px;
w\idth:140px;
}
/* style the top level hover */
div.menu a:hover, div.menu ul ul a:hover
  {
  color:#fff; 
  background: #7b1d5f;  
  }    

div.menu :hover > a, div.menu ul ul :hover > a 
  {
  color:#fff;
  background: #7b1d5f;
  }

/* make the second level visible when hover on first level list OR link */
div.menu ul li:hover ul,
div.menu ul a:hover ul
  {
  visibility:visible; 
  }