jQuery实现导航栏

最新推荐文章于 2023-07-02 21:55:07 发布

weixin_30566111

最新推荐文章于 2023-07-02 21:55:07 发布

阅读量133

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lihuijuan/p/9197955.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现导航栏</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #navigation>ul{
            list-style: none;
        }
        #navigation>ul>li{
            float: left;
            width: 80px;
            height: 30px;
            background: #009f95;
            color: #ffffff;
            text-align: center;
            line-height: 30px;
            cursor:pointer;
        }
        #navigation>ul>li:hover{
            background:#0B61A4;
        }
        #navigation>ul>li>a{
            color:#fff;
            text-decoration:none;
        }
        #navigation>ul>li>ul{
            display:none;

        }
        #navigation>ul>li>ul>li{
            background: #00B83F;
            list-style: none;
        }
        #navigation>ul>li>ul>li:hover{
            background: #1E9FFF;
        }
        #navigation>ul>li>ul>li>a{
            color:#fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="navigation">
    <ul>
        <li>
            <a href="">1</a>
            <ul>
                <li><a href="">11</a></li>
                <li><a href="">13</a></li>
                <li><a href="">14</a></li>
            </ul>
        </li>
        <li>
            <a href="">2</a>
            <ul>
                <li><a href="">21</a></li>
                <li><a href="">22</a></li>
                <li><a href="">23</a></li>
            </ul>
        </li>
        <li>
            <a href="">3</a>
        </li>
    </ul>
</div>
<script src="../js/vendor/jquery-3.2.1.min.js"></script>
<script>
    $("#navigation>ul>li:has(ul)").hover(function(){
        //show
        $(this).children('ul').stop().slideDown();
    },function(){
        //hide
       $(this).children('ul').stop().slideUp();
    })

</script>
</body>

</html>