jQuery 实现下拉导航 二级导航

1.引入jQuery 

<script language="javascript" src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>

2.html 代码

   

<div class="banner">
<div class="mainnav">
<ul>
<li>
<a href="/">
首页
</a>
</li>
<li style="overflow:visible">
<a href=""><span style="font-family: Arial, Helvetica, sans-serif;">一级导航</span> </a>
<ul class="mainxl" >
<li><a href="" target="_blank">二<span style="font-family: Arial, Helvetica, sans-serif;">级导航</span></a></li>
<li><a href="" target="_blank"><span style="font-family: Arial, Helvetica, sans-serif;">二</span><span style="font-family: Arial, Helvetica, sans-serif;">级导航</span></a></li>
<li><a href="" target="_blank">二级导航</a></li>
<li><a href="" target="_blank">二级导航</a></li>
<li><a href="" target="_blank">二级导航</a></li>
</ul>
</li>
&
4000
lt;li>
<a href=""一级导航</a>
</li>
<li>
<a href="">yjdh</a>
</li>

<li style="overflow:visible">
<a href="javascript:void(0);">热点新闻</a>
<ul class="mainxl">
<li><a href="" target="_blank">媒体报道</a></li>
<li><a href="" target="_blank">新闻</a></li>
<li><a href="" target="_blank">品牌视频</a></li>
</ul>
</li>
<li>
<a href="">
一级
</a>
</li>
<li>
<a href="">
一级
</a>
</li>
<li>
<a href="">
一级
</a>
</li>
<li>
<a href="">一级</a>
</li>
</ul>
<div class="clear"></div>
</div>
</div>

   css

   .mainnav { width: 980px; margin:0 auto;padding-top: 10px;}
.mainnav ul {width:980px;float:left;height:48px;}
.mainnav ul li {width:100px;line-height:48px;height:48px;float:left;overflow:hidden;text-align:center;position:relative;z-index:0;}
.mainnav ul li.cur {background:#008578;}
.mainnav ul li a {width:100%;height:48px;color:#ffffff;font-size:16px;display:block;font-family:"Microsoft Yahei";text-align:center;}
.mainnav ul li a:hover {text-decoration:none;#background-color: #030303;}
.mainnav ul li span {width:100%;position:absolute;z-index:1;height:48px;right:0;}
.mainnav ul li a span.in {top:0;}
.mainnav ul li a span.out {top:48px;background:#414141;}
.mainnav .mainxl{position: absolute; top: 44px;z-index: 999;background-color: #C66905;display:none;width: 100px;height: auto;}

3.js 代码

  

<script>
$(document).ready(function () {
$('.mainnav li').mousemove(function () {
$(this).css({ background: "#414141" });
$(this).find('ul').slideDown();//you can give it a speed
});
$('.mainnav li').mouseleave(function () {
$(this).css({ background:"none" });
$(this).find('ul').slideUp("fast");
});
});
</script>