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