jQuery一级菜单

最新推荐文章于 2022-05-07 15:40:14 发布

老师你好ss

最新推荐文章于 2022-05-07 15:40:14 发布

阅读量155

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_43384629/article/details/118154131

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style type="text/css">
        *{margin:0;padding:0}
        ul{list-style:none}
        .wrap{width:330px;height:30px;margin:100px auto 0;padding-left:10px}
        .wrap li{background:skyblue}
        .wrap>ul>li{float:left;margin-right:5px;position:relative;background:#0eb0ed}
        .wrap a{display:block;height:30px;width:100px;text-decoration:none;color:#000;line-height:30px;text-align:center}
        .wrap li ul{position:absolute;top:30px;display:none}

    </style>
    <script>
        $(function () {
              $(".wrap>ul>li").mouseenter(function () {
                  $(this).children("ul").show();
              })
              $(".wrap>ul>li").mouseleave(function () {
                  $(this).children("ul").hide()
              })
        })
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单</a></li>
                <li><a href="javascript:void(0);">二级菜单</a></li>
                <li><a href="javascript:void(0);">二级菜单</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

老师你好ss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery一级菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> <style type="text/css"> *{margin:0;padding:0} .
复制链接

扫一扫