.menu 
{
  position: relative;

  z-index: 1000;
}




/* remove all the bullets, borders and padding from the default list styling */
.menu ul 
{
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  width: 174px;
  position: relative;
  border-top: solid 1px #666;

  z-index: 500;
}

.menu ul ul
{
  width: 140px;
  border-top: solid 1px #ccc;

  z-index: 500;
}


.menu ul.top {top: -10px}




/* style the list items */
.menu li 
{
  height: 21px;
  border-bottom: solid 1px #666;
  background-color: #ddd;

  float: left;  /* needed for IE7 whitespace issue */
}

.menu li.this, .menu li.this:hover
{
  background-color: #888;
}

.menu li li
{
  height: 20px;
  border-bottom: solid 1px #ccc;
  background-color: #000;
}


.menu li:hover 
{ 
  position: relative;

  background-color: #eda;
}

.menu li li:hover 
{ 
  background-color: #4f5e7f;
}




/* style the links */
.menu a, .menu a:visited 
{
  display: block;  
  text-decoration: none;
  height: 21px;
  width: 174px;
  color: #4f5e7f;
  font: bold 12px tahoma, verdana, arial, sans-serif;
  padding: 0 0 0 0;
}

.menu a.this, .menu a.this:hover
{
  color: #fff;
}

.menu li ul a, .menu li ul a:visited 
{
  height: 20px;
  width: 140px;
  color: #ddd;
  font: bold 11px tahoma, verdana, arial, sans-serif;
}



/* style the link hover */
.menu a:hover
{
  color: #000;

  /* position: relative; */
}

.menu li ul a:hover
{
  color: #fff;
}



.menu a span
{
  padding: 3px 8px 0 8px;
  display: block;
}



/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul 
{
  visibility: hidden;
  position: absolute;
  top: 0;

  /* set up the overlap (minus the overrun) */
  left: 150px;

  /* set up the overrun area */
  padding: 0;

  /* this is for IE to make it interpret the overrrun padding */
  /* background:transparent url(transparent.gif); */
}




/* for IE5.5 and IE6 you need to style each level hover */

/* 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;
  background: #ccc;
}









