Yeah - I know there are millions of these damn things floating around, but I can never seem to find a REALLY simple on that I like, so here's what I've been using.

It's using the HTML5 <nav> element, just replace with a div container for the nav object if you're still using old HTML.

HTML:

<nav>
  <ul>
    <li><a href="#">Item One</a></li>
      <ul>
        <li><a href="#">Item One-One</a></li>
        <li><a href="#">Item One-Two</a></li>
        <li><a href="#">Item One-Three</a></li>
      </ul>
    </li>
    <li><a href="#">Item Two</a></li>
    ...
  </ul>
</nav>

CSS:

nav { display: block; float: right; margin: -35px -12px 0 0; }
  nav ul { display: block; }
    nav ul li { display: inline; position: relative; float: left; list-style: none; }
      nav ul li a, nav ul li a:link, nav ul li a:visited { display: block; float: left; border-right: 2px solid #000; padding: 2px 12px 4px 12px; margin: 0; line-height: 10px; color: #000; font-weight: bold; }
      nav ul li a:hover, nav ul li a:active { color: #9cca2b; }
      nav ul li:last a { border: none; }

    /* Sub-Nav */
    nav ul li ul { display: none; position: absolute; top: 18px; left: 7px; width: 120px; padding: 5px; background-color: #000; background-color: rgba(0, 0, 0, .7);
        -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .5);
        -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .5);
        box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .5);
    }
      nav ul li ul li { display: block; float: none; clear: both; }
      nav ul li ul li a, nav ul li ul li a:link, nav ul li ul li a:visited { display: block; float: none; border: 0; padding: 8px 5px; margin: 0; color: #fff; }
      nav ul li ul li a:hover, nav ul li ul li a:active { color: #9cca2b; }

JQuery:

$(function(){
  curz = 999; 
  $("nav>ul li").hover(function() {
    var timeout = $(this).data("timeout");
     if(timeout) clearTimeout(timeout);
       $(this).find("ul").slideDown(300).css({ 'z-index':curz++ });
     }, function() {
       $(this).data("timeout", setTimeout($.proxy(function() {
       $(this).find("ul").slideUp(300);
     }, this), 300));
   });
});