<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.menu 
  {
  width:449px; 
  height:20px; 
  position:relative; 
  z-index:100;
  font: 500 11px arial, 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 
  { 
  background: #FFFFFF; 
  }
  
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li 
  {
  float: left;
  position: relative;
  }
  
.menu ul ul li 
  {         
  width: 80px;
  }
  
/* style the links for the top level */
.menu a, 
.menu a:visited 
  {
  display: block;
  font: 500 11px arial, sans-serif;
  text-decoration: none; 
  color: #FFFFFF; 
  height: 20px; 
  background: #7DC242; 
  padding: 0px 5px; 
  line-height: 19px; 
  border: solid 1px #7DC242; 
  }

/* 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: 0px;
  top: 20px;
  left: 0px;
  }
 
/* 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; 
  border-collapse: collapse;;
  }

/* style the top level hover */
.menu a:hover
  {
  color: #999999; 
  background:#5B912E;
  }
  
.menu ul ul :hover > a 
  {
  color: #FFFFFF;
  background: #7DC242;
  }

.menu :hover > a, 
.menu ul ul :hover > a 
  {
  color: #7DC242;
  background: #FFFFFF;
  border: solid 1px #7DC242; 
  }

/* 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;
  }

</style>

