Mã HTML:

<ul id="menu">
  <li>Sub 1
    <ul>
      <li>test 1</li>
      <li>test 2</li>
      <li>test 3</li>
      <li>test 4</li>
    </ul>
  </li>
  <li>Sub 2
    <ul>
      <li>test 1</li>
      <li>test 2</li>
      <li>test 3</li>
      <li>test 4</li>
    </ul>
  </li>
</ul>

Code:

$(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.menu").hover(toggle("Down", "none"), toggle("Up", "block"));
  $("li.menu ul").hide();
});

Ít hiệu ứng hơn: chỉ show/hide:

$(document).ready(function() {

	$("#menu li ul").hide(); 

	$("#menu li").hover(
        function () {
		$(this).children("ul").show();
        },function(){
		$(this).children("ul").hide();
	});//hover

});// document ready

In the previous example, please use js to hide the menu (the first line) if your menu requires js. If some one doesn't have js turned on they can still get to your content. Also note you can change the show/hide to any old jQuery effect and use "slow" and "fast" to animate it.

Source: jquery.com