Jquery实现三级菜单的制作

来源：互联网发布：路径规划算法原理编辑：程序博客网时间：2024/06/04 23:13

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

0 0