/* style the outer div to give it width */
.menu {
   width: auto;
   font-size: 110%;
}

/* This is the tab set up */
.menu ul {
float: left;
width: inherit;
margin: 0;
padding: 0 0 0 25px;
list-style: none;
background: transparent;
}

/* float to make it horizontal and add a relative positon to control the dropdown menu position */
.menu ul li {
float: left;
margin: 0 25px 0 0; /*This is the spacing between the tabs*/
padding: 0;
position: relative; 
width: 140px;
}

/* style the links for the top level */
.menu ul li a {
float: left;
display: block;
margin: 0;
padding: 2px 5px 5px 12px;
font-weight: bold;
color: #2c3a23;
text-decoration: none;
border: 1px solid #9b8748;
border-top: none;
background: #aeb390;
width: 140px;
text-align: left;
height: 12px;
line-height: 16px;
}


.menu ul ul {
   width: 140px;
   position: relative;
   z-index: 100;
   margin-left: -25px;
}

/* a hack so that IE faulty box model is corrected */
* html .menu a, * html .menu a:visited {
   width: 140px;
   w\idth:135px;
}

/* style the second level background */
.menu ul li ul li a {
  background: #aeb390;
  color: #2c3a23;
}

/* style the second level hover */
.menu ul li ul li a:hover {
  background: #2c3a23;
  color: #fff;
}

/* 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;
   width: 140px;
}

/* another hack for IE5.5 */
* html .menu ul ul {
   top: 19px;
   t\op: 21px;
}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {
   position: absolute;
   top: 0;
   left: 0;
}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   background: #aeb390;
   border: solid #555;
   border-width: 0 1px 1px 1px;
   color: #000;
   height: auto;
   line-height: 16px;
   padding: 3px 3px 3px 12px;
   width: 140px;
   text-align: left;
}

/* yet another hack for IE */
* html .menu ul ul a {
   width: 140px;
   w\idth: 138px;
}


/* style the top level hover for IE 6 and below */
.menu a:hover, .menu ul ul a:hover {
   color: #fff;
   background: #2c3a23;
}
.menu :hover > a, .menu ul ul :hover > a {
   color: #fff;
   background: #2c3a23;
}
.menu ul li:hover ul,
.menu ul a:hover ul {
   visibility: visible;
}


.menu ul li a:hover, body.home .menu ul li#home>a,
.menu ul li a:hover, body.products .menu ul li#products>a,
.menu ul li a:hover, body.showcase .menu ul li#showcase>a,
.menu ul li a:hover, body.about .menu ul li#about>a {
color: #fff;
border-color: #727377;
background: #2c3a23;
}