文章利用了jquery来快速实例二级下拉效果，具体缓冲效果的哦。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单实用的二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css教程">
html,body,ul,li,h1,h2,h3,h4,h5,h6,p,fieldset,legend{padding:0;margin:0;}
body{font:12px/normal verdana,arial,helvetica,sans-serif;}
ul,li{list-style-type:none;text-transform:capitalize;}
.clear{clear:both;*display:inline;/*ie only*/}
/*menu*/
#nav{margin:0 auto 60px;width:1080px;display:block;}
#nav .jquery_out{float:left;line-height:32px;display:block;border-right:1px solid #fff;text-align:center;color:#fff;font:18px/32px "微软雅黑";background:#062723;}
#nav .jquery_out .smile{padding-left:1em;}
#nav .jquery_inner{margin-left:16px;}
#nav .jquery{margin-right:1px;padding:0 2em;}
#nav .mainlevel{background:#ffe60c;float:left;border-right:1px solid #fff;width:140px;/*ie6 only*/}
#nav .mainlevel a{color:#000;text-decoration:none;line-height:32px;display:block;padding:0 20px;width:100px;}
#nav .mainlevel a:hover{color:#fff;text-decoration:none;background:#062723;}
#nav .mainlevel ul{display:none;position:absolute;}
#nav .mainlevel li{border-top:1px solid #fff;background:#ffe60c;width:140px;/*ie6 only*/}
.log{text-align:center;color:skyblue;line-height:24px;text-transform:capitalize;margin:50px auto;}
</style>
<script type="text/网页特效" src="/www.111cn.net/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//menu
$(document).ready(function(){
$('li.mainlevel').mousemove(function(){
$(this).find('ul').slidedown();//you can give it a speed
});
$('li.mainlevel').mouseleave(function(){
$(this).find('ul').slideup("fast");
});
});
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div id="menu">
<ul id="nav">
<li class="jquery_out">
<div class="jquery_inner">
<div class="jquery">
<span class="text">let'jquery</span><span class="smile">^_^</span>
</div>
</div>
</li>
<li class="mainlevel" id="mainlevel_01"><a href="#">do touch me</a>
<ul id="sub_01">
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">slideup</a></li>
<li><a href="#">slidedown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_02"><a href="#">do touch me</a>
<ul id="sub_02">
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">slideup</a></li>
<li><a href="#">slidedown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_03"><a href="#">do touch me</a>
<ul id="sub_03">
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">slideup</a></li>
<li><a href="#">slidedown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_04"><a href="#">do touch me</a>
<ul id="sub_04">
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">slideup</a></li>
<li><a href="#">slidedown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_05"><a href="#">do touch me</a>
<ul id="sub_05">
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">slideup</a></li>
<li><a href="#">slidedown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_06"><a href="#">do touch me</a>
<ul id="sub_06">
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">slideup</a></li>
<li><a href="#">slidedown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
</body>
</html>
jquery插件可以到jquery.com下载哦。