Jquery实现三级菜单的制作

最新推荐文章于 2024-07-26 03:31:50 发布

Wangdanting123

最新推荐文章于 2024-07-26 03:31:50 发布

阅读量6.3k

点赞数 2

文章标签： jquery 导航

本文链接：https://blog.csdn.net/Wangdanting123/article/details/51348464

版权

HTML代码：

<body>
<div class="navMenu">
    <ul>
        <li><a href="#">首页</a>
            <ul>
                <li><a href="#">JavaScript+</a>
                    <ul>
                        <li><a href="#">三角函数</a></li>
                        <li><a href="#">矩形</a></li>
                    </ul>
                </li>
                <li><a href="#">语文</a>
                    <ul>
                        <li><a href="#">唐诗</a></li>
                        <li><a href="#">宋词</a></li>
                    </ul>
                </li>
                <li><a href="#">英语</a></li>
            </ul>
        </li>
        <li><a href="#">课程大厅</a></li>
        <li><a href="#">学习中心+</a>
            <ul>
                <li><a href="#">JavaScript+</a>
                    <ul>
                        <li><a href="#">三角函数</a></li>
                        <li><a href="#">矩形</a></li>
                    </ul>
                </li>
                <li><a href="#">语文</a>
                    <ul>
                        <li><a href="#">三角函数</a></li>
                        <li><a href="#">矩形</a></li>
                    </ul>
                </li>
                <li><a href="#">英语</a></li>
            </ul>
        </li>
        <li><a href="#">帮助</a></li>
    </ul>
</div>
</body>

js代码：

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("li").has("ul").mouseenter(function(){
            $(this).children("ul").css("display","block");
            $(this).css("backgroundColor","#0066FF");
        }).mouseleave(function () {
            $(this).children("ul").css("display","none");
            $(this).css("backgroundColor","#eee");
        })
    })
</script>

css代码：

  *{
            padding:0;
            margin:0;
        }
        /*一级菜单*/
        .navMenu {
            width:570px;
            margin:0 auto;
        }
        .navMenu ul li{
            float: left;
            position: relative;
        }
        li{
            list-style: none;
            background-color: #eee;
            width: 140px;
            height: 40px;
            text-align: center;
            margin-right: 2px;
            margin-bottom: 2px;
        }
        ul li a{
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            color: #000;
            text-decoration: none;
            display: block;
            padding:0 10px;
        }
        /*二级菜单*/
        .navMenu ul li ul {
            display: none;
            position:absolute;
            left: 0;
            top:0;
            margin-top:42px;
        }
        .navMenu ul li ul li{
            float:none;
        }
        /*三级菜单*/
        .navMenu ul li ul li ul{
            display: none;
            left:140px;
            top:-42px;
        }