#menu {
  background: #003169;
  float:left;
  position:relative;
  left:4em;
}

#menu ul {
  list-style: none;
  line-height:1.1;
  margin: 0;
  padding: 0;
  float: left;
}

#menu h1 {
  display: block;
  margin: 0;
  padding: 2px 20px;
  color: #FFFFFF;
  background: #003169;
  text-align: center;
}

#menu h2 {
  display: block;
  margin: 0;
  width: 9em;
  padding: 2px 10px;
  color: #000000;
  background: #d9e4fb;
  text-align: left;
}

#menu h1 a {
  font: bold 11px/16px verdana, helvetica, sans-serif;
  color: #FFFFFF;
  text-transform: uppercase;
}

#menu h2 a {
  font: bold 10px/16px verdana, helvetica, sans-serif;
  color: #000000;
  text-transform: uppercase;
}

#menu a {
  text-decoration: none;
}

#menu h1:hover {
  color: #000000;
  background: #297DDC;
}

#menu h2:hover {
  color: #FFFFFF;
  background: #297DDC;
}

#menu h1 a:hover {
  color: #FFFFFF;
}

#menu h2 a:hover {
  color: #FFFFFF;
}

#menu li {
  position: relative;
}

#menu ul ul {
  position: absolute;
  z-index: 500;
}

#menu ul ul ul {
  position: absolute;
  top: 0;
  left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {
  display: block;
  border: solid width:1px #999999;
}

<!--[if IE]>
  #menu {
    float:left;
    position:absolute;
    left:4em;
  }
  <style type="text/css" media="screen">
   #menu ul li {
     float: left; width: 100%;
   }
  </style>
<![endif]-->

<!--[if lt IE 7]>
  <style type="text/css" media="screen">
  body {
    behavior: url(csshover.htc);
    font-size: 100%;
  }
  
  #menu ul li h2 {height: 1%;}
  
  #menu a, #menu h1 {
    font: bold 0.7em/1.4em arial, helvetica, sans-serif;
  }
  </style>
<![endif]-->