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

A simple show-submenu-on-hover-menu.

Markup:

<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>

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();
});

Another method with less animation:

$(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 animate it.