#productmenu ul 
  {
  position:         relative;
  z-index:          500px;
  padding:          0px;
  margin:           0px;
  list-style-type:  none;
  width:            150px;
  background:       #153566 url('/images/menufoot.jpg') no-repeat bottom;
  }
  
/* style the list items */
#productmenu li 
  {
  background: #153566;
  height:     26px;
  /* for IE7 */
  float:      left;
  }
  
#productmenu li.sub 
  {
  background:   #153566 url('./images/arrowl.gif') no-repeat right center;
  } 

/* get rid of the table */
#productmenu table 
  {
  position:absolute; 
  border-collapse:collapse; 
  top:0; left:0; 
  z-index:100; 
  font-size:1em;
  }

/* style the links */
#productmenu a, 
#productmenu a:visited 
  {
  font:             500 11px verdana, arial, sans-serif;
  display:          block; 
  text-decoration:  none;
  height:           25px;
  line-height:      25px;
  width:            149px;
  color:            #EEEEEE;
  text-indent:      5px;
  border:           1px solid #506B92;
  border-width:     0px 1px 1px 1px;
  }
  
/* style the link hover */
* html #productmenu a:hover 
  {
  color:            #000000; 
  background:       #999999; 
  position:         relative;
  }

#productmenu li:hover
  {
  position:         relative;
  }

/* For accessibility of the top level menu when tabbing */
#productmenu a:active, #productmenu a:focus 
  {
  color:            #C4D8F6;
  background:       #122849;
  }

/* retain the hover colors for each sublevel IE7 and Firefox etc */
#productmenu li:hover > a 
  {
  color:            #C4D8F6;
  background:       #122849;
  }
 
/* hide the sub levels and give them a positon absolute so that they take up no room */
#productmenu li ul 
  {
  visibility:       hidden;
  position:         absolute;
  top:              -20px;
  /* set up the overlap (minus the overrun) */
  left:             100px;
  /* set up the overrun area */
  padding:          30px;
  /* this is for IE to make it interpret the overrrun padding */
  background:       transparent url(transparent.gif);
  }

/* for browsers that understand this is all you need for the flyouts */
#productmenu li:hover > ul 
  {
  visibility:visible;
  }

/* for IE5.5 and IE6 you need to style each level hover */

/* keep the third level+ hidden when you hover on first level link */
#productmenu ul a:hover ul ul
  {
  visibility:hidden;
  }
  
/* keep the fourth level+ hidden when you hover on second level link */
#productmenu ul a:hover ul a:hover ul ul
  {
  visibility:hidden;
  }
  
/* keep the fifth level hidden when you hover on third level link */
#productmenu ul a:hover ul a:hover ul a:hover ul ul                             ,
  {
  visibility:   hidden;
  }

/* make the second level visible when hover on first level link */
#productmenu ul a:hover ul,
#productmenu ul a:hover ul a:hover ul,
#productmenu ul a:hover ul a:hover ul a:hover ul,
#productmenu ul a:hover ul a:hover ul a:hover ul a:hover ul 
  { 
  visibility: visible;
  }