<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

  $(document).ready(function() {

      var toggle = function(direction, display) {
         return function() {
            var self = this;
            var ul = $("ul", this);
            if( ul.css("display") == display && !self["block" + direction] ) {
               self["block" + direction] = true;
               ul["slide" + direction]("slow", function() {
                  self["block" + direction] = false;
               });
            }
         };
      }
      $("li.mmenu").hover(toggle("Down", "none"), toggle("Up", "block"));
      $("li.mmenu ul").hide();

   });

</script>

#mmenu {
   list-style-type: none;
   padding: 0px;
   margin: 0px;
}

#mmenu a {
   text-decoration: none;
   font-family: Verdana,sans-serif;
   font-weight: normal;
   font-size: small;
   color: white;
}

#mmenu ul {
   list-style-type: none;
   padding: 0px;
   margin: 0px;
   position: absolute;
}

li.mmenu {
   float: left;
   width: 14em;
   text-indent: .7em;

   border-top: 1px solid #aaa;
   border-left: 1px solid #aaa;
   background: #666;
   padding: 1px 0px;
}

li.mmenu li {
   border-top: 1px solid #aaa;
   background: #666;
   padding: 1px 0px;
   width: 14em;
}

li.mmenu:hover {
   background: #bbb;
}

li.mmenu li:hover {
   background: #bbb;
}