b站 4天从零玩转jQuery【黑马程序员】部分案例代码_下拉菜单

最新推荐文章于 2021-03-10 14:07:09 发布

愿世间没有秃头

最新推荐文章于 2021-03-10 14:07:09 发布

阅读量255

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_45801837/article/details/106337514

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            margin: 200px auto;
            position: relative;
            width:320px ;
            height: 30px;
            background: #679b9b;
        }
        a{
            text-decoration: none;
            color:white;

            line-height: 30px;       /*设置文字上下居中*/

            display: block;           /*设置文字水平居中*/
            text-align: center;
        }
        a:hover{
            color: #679b9b;
        }
       .div1 ul li ul{
           position: absolute;
           top:30px;
           display: none;
       }
        li{
            list-style: none;
            width: 100px;
            height:30px;
            background: #6b9eff;
        }
        .div1 ul li{
            float: left;
            margin-left: 5px;
        }
        .div1 ul li ul li{
            float: none;
        }
        .div1 ul li ul{
            margin-left: -5px;
        }

    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $(".div1>ul>li").mouseenter(function () {
                $(this).children("ul").css("display","block");   //方法1
                //$(this).children("ul").show();                       //方法2
            });
            $(".div1>ul>li").mouseleave(function () {
                $(this).children("ul").css("display","none");   //方法1
                //$(this).children("ul").hide();                       //方法2
            });
        });

    </script>
</head>
<body>
<div class="div1">
    <ul>
        <li>
            <a href="#">一级菜单1</a>
            <ul>
                <li><a href="#">二级菜单1</a></li>
                <li><a href="#">二级菜单2</a></li>
                <li><a href="#">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单2</a>
            <ul>
                <li><a href="#">二级菜单1</a></li>
                <li><a href="#">二级菜单2</a></li>
                <li><a href="#">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单3</a>
            <ul>
                <li><a href="#">二级菜单1</a></li>
                <li><a href="#">二级菜单2</a></li>
                <li><a href="#">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述我好像写的有点简单了，也没啥说的，一切都在代码中。哈哈哈。

愿世间没有秃头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
b站 4天从零玩转jQuery【黑马程序员】部分案例代码_下拉菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .div1{ margin: 200px a
复制链接

扫一扫