/* This ia a modified version of the CSS from the popout menu tutorial at 
   www.tanfa.co.uk and www.seoconsultants.com */

#menu {
  position: fixed;
  width: 11em;
  margin: 130px 0 10px 0;
  padding-bottom: 20px;
}

#menu ul { /* remove bullets and list indents */
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu a, #menu h2 {
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #888 #555 #bbb;
  color: navy;
  font-size: small;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 2px 3px;
}

#menu h2 {
  text-transform: capitalize;
  background-color: #f0f0f0;
}

#menu a:hover { 
  background-color: navy; 
  color: white; 
}

#menu a:visited { 
  color: #8f8fbd; 
}

#menu a#m_current { 
  background-color: #9090df;
  color: white; 
}

#menu li {
  position: relative;
  background-color: white;
} 

#menu ul ul {
  position: absolute;
  top: 0;
  left: 100%; /* to position them to the right of their containing block */
  width: 100%; /* width is based on the containing block */
}

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

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

<!--[if IE]>
  <style type="text/css" media="screen">
    body {
      behavior: url(csshover.htc); /* call hover behaviour file */
    } 
    #menu ul li {
      float: left; /* cure IE5.x "whitespace in lists" problem */
      width: 100%;
    }
    #menu ul li a {
      height: 1%; /* make links honour display: block; properly */
    } 
  </style>
<![endif]-->