Source jQery
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>Source CSS
<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>
<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>