来源地址：https://my.oschina.net/xngiser/blog/28323

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

$(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();
});
$(document).ready(function() {

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

$("#menu li").hover(
function () {
$(this).children("ul").show("slow");
},function(){
$(this).children("ul").hide("slow");
});//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 

jQuery官网一个关于菜单的例子