Simple dropdow list menu

functions.js

$('#nav-menu  li').hover(
  function () {
    $('ul', this).stop().slideDown(100);
  },
  function () {
    $('ul', this).stop().slideUp(100);
  }
);

menu.html

<ul id="nav-menu" class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Works</a>
    <ul>
      <li><a href="#">Print</a></li>
      <li><a href="#">Web</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

style.css

.menu li{ float:left; list-style-type:none; position:relative;}
.menu li a{ display:block; padding: 5px; background:#ccc; }
.menu li ul{ display:none; background:#ccc; padding: 5px; position: absolute; top:100%; left:0; }
.menu li ul li{ float:none; }