thanka a lot for :http://www.51xuediannao.com/js/nav/navlevel2.html
效果:
代码:
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(document).ready(function(){
jQuery.navlevel2 = function(level1,dytime) {
$(level1).mouseenter(function(){
varthis = $(this);
delytime=setTimeout(function(){
varthis.find('ul').slideDown();
},dytime);
});
$(level1).mouseleave(function(){
clearTimeout(delytime);
$(this).find('ul').slideUp();
});
};
$.navlevel2("li.mainlevel",500);
});
</script>
<styletype="text/css">
html,body,ul,li{padding:0; margin:0;}
body {font:12px/normalVerdana, Arial, Helvetica, sans-serif; padding:50px;}
ul,li {list-style-type:none; text-transform:capitalize;}
/*menu*/
#nav { display:block;}
#nav.mainlevel {background:#164C3F; float:left; border-right:1pxsolid#fff; width:140px;/*IE6 only*/}
#nav.mainlevela {color:#ffffff; text-decoration:none; line-height:32px; display:block; padding:020px; width:100px;}
#nav.mainlevela:hover {color:#fff; text-decoration:none;}
#nav.mainlevelul {display:none; position:absolute;}
#nav.mainlevelli {border-top:1pxsolid#fff; background:#164C3F; width:140px;/*IE6 only*/}
</style>
</head>
<body>
<ulid="nav">
<liclass="mainlevel"><ahref="http://www.51xuediannao.com/js/">jquery特效</a>
<ul>
<li><ahref="http://www.51xuediannao.com/js/texiao/">网页特效</a></li>
<li><ahref="http://www.51xuediannao.com/js/nav/">导航菜单</a></li>
<li><ahref="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a></li>
<li><ahref="http://www.51xuediannao.com/qqkefu/">qq在线客服代码</a></li>
<li><ahref="http://www.51xuediannao.com/xuanxiangka/">选项卡代码</a></li>
</ul>
</li>
<liclass="mainlevel"><ahref="http://www.51xuediannao.com/js/">jquery特效</a>
<ul>
<li><ahref="http://www.51xuediannao.com/js/texiao/">网页特效</a></li>
<li><ahref="http://www.51xuediannao.com/js/nav/">导航菜单</a></li>
<li><ahref="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a></li>
<li><ahref="http://www.51xuediannao.com/qqkefu/">qq在线客服代码</a></li>
<li><ahref="http://www.51xuediannao.com/xuanxiangka/">选项卡代码</a></li>
</ul>
</li>
<liclass="mainlevel"><ahref="http://www.51xuediannao.com/js/">jquery特效</a>
<ul>
<li><ahref="http://www.51xuediannao.com/js/texiao/">网页特效</a></li>
<li><ahref="http://www.51xuediannao.com/js/nav/">导航菜单</a></li>
<li><ahref="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a></li>
<li><ahref="http://www.51xuediannao.com/qqkefu/">qq在线客服代码</a></li>
<li><ahref="http://www.51xuediannao.com/xuanxiangka/">选项卡代码</a></li>
</ul>
</li>
</ul>