jQuery下拉菜单

浏览数：91 / 时间：2015年06月09日

下拉菜单如果采用原生javascript制作代码比较多，但是使用jquery就大大提高了开发效率，几行代码就搞定

    <div id="wrap">
        <ul id="menu">
            <li><a href="#">Study</a>
                <ul class="submenu">
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">Python</a></li>
                    <li><a href="#">PHP</a></li>
                </ul>
            </li>
            <li><a href="#">Travel</a>
                <ul class="submenu">
                    <li><a href="#">ZhangJiaJie</a></li>
                    <li><a href="#">YunNanDaLi</a></li>
                    <li><a href="#">JiuZhaiGou</a></li>
                </ul>
            </li>
            <li><a href="#">Music</a>
                <ul class="submenu">
                    <li><a href="#">JayChou</a></li>
                    <li><a href="#">Eason</a></li>
                    <li><a href="#">Andy</a></li>
                </ul>
            </li>
            <li><a href="#">FineFood</a>
                <ul class="submenu">
                    <li><a href="#">Hunan</a></li>
                    <li><a href="#">Sichuan</a></li>
                </ul>
            </li>
        </ul>
    </div>

CSS代码

    *{
        margin:0;
        padding:0;
    }
    body{
        background:url(QinShiMingYue.jpg);
    }
    a{
        text-decoration:none;
        color:#000000;
        font-family:Arial, Helvetica, sans-serif;
    }
    #wrap{
        width:388px;
        margin:50px auto;
    }
    #menu li{
        list-style-type:none;
        float:left;
        margin-right:2px;
        width:95px;
    }
    #menu>li{
        border-bottom:1px solid #000;
    }
    #menu li a{
        display:block;
        height:30px;
        line-height:30px;
        background-color:#CCCCCC;
        text-align:center;
    }
    #menu li a:hover{
        color:#CCCCCC;
        background-color:#000000;
    }
    .submenu{
        display:none;
        margin-top:2px;
    }
    .submenu li{
        margin-bottom:1px;
    }

jquery代码

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><!--引入百度cdn的jquery库-->
<script type="text/javascript">
    $(document).ready(function(){
        var lis=$("#menu>li");
        lis.hover(
            function(){
                    $(this).find(".submenu").show("fast");
            },
            function(){
                $(this).find(".submenu").hide("fast");
            }
        )
    });
</script>