b站 4天从零玩转jQuery【黑马程序员】部分案例代码_动画下拉菜单_黑马程序员的节点操作案例下拉菜单代码-CSDN博客

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

<!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").stop(true,false).slideDown(400);                  //方法2    ♦动态滑下来   ♦stop方法
            });
            //鼠标移出事件
            $(".div1>ul>li").mouseleave(function () {
                //$(this).children("ul").css("display","none");   //方法1
                $(this).children("ul").stop(true,false).slideUp(400);               //方法2     ♦动态收起来       ♦stop方法
            });
        });

    </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>