Creating a simple dropdown with jQuery

Source jQery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul#menu > li").hover(
      function(){
        $(this).addClass('hover');
        $(this).children('ul').stop(true,true).slideDown("slow");
      },
      function(){
        $(this).removeClass('hover');
        $(this).children('ul').slideUp("slow");
      }
    );
});
</script>

Source CSS

<style type="text/css">
ul#menu, ul#menu ul { list-style:none; margin:0; padding:0; }
ul#menu li { float:left; position:relative; display:inline-block; }
ul#menu li a { display:block; padding:3px 8px; color:#FFF; background-color:#333; text-decoration:none; margin:0 2px; }
ul#menu li a:hover, ul#menu li.hover a { background-color:#999; }

/* Style untuk dropdown */
ul#menu ul { display:none; position:absolute; }
ul#menu ul li { float:none; }
ul#menu ul li a, ul#menu li.hover ul li a { display:block; width:100px; background-color:#999; }
ul#menu ul li a:hover, ul#menu li.hover ul li a:hover { background-color:#333;}
</style>