下拉菜单列表

当鼠标进入时，效果如下：
在这里插入图片描述

鼠标离开时，下拉列表进行隐藏。效果如下：
下面展示代码
//
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0px;margin: 0px;list-style: none;}
        .box{
            margin: 100px auto;
            width: 340px;
            height: 30px;
            background: url(项目J3-11/images/bg.jpg);
        }
        .box li{
            width: 100px;
            height: 30px;
            background: url(项目J3-11/images/libg.jpg);
            float: left;
            margin-left: 10px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            position: relative;
            left: 0px;
        }
        .box li ul{
           text-align: center;
           display: none;
           position:absolute;
           top: 30px;
           left: 0px;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>我的淘宝
            <ul>
                <li>已买到的宝贝</li>
                <li>我的足迹</li>
                <li>购物车</li>
            </ul>
        </li>
        <li>商品分类
            <ul>
                <li>日化用品</li>
                <li>精品服饰</li>
                <li>零食百货</li>
            </ul>
        </li>
        <li>卖家中心
            <ul>
                <li>商品列表</li>
                <li>销售管理</li>
                <li>订单管理</li>
            </ul>
        </li>
    </ul>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script>
    //jquery的代码我们通常会包裹在一个$(function(){})函数中
    //$(function() {}) 是$(document).ready(function()的简写
    $(function(){//ready事件提供页面加载事件，只需Dom元素加载完成后便可触发
        //“$(参数)”创建jquery实例对象，为它绑定mouseover的鼠标事件，鼠标进入触发，参数为事件的处理程序，即匿名函数
        //$('.box>li')层次选择器中的子元素选择器，获取类名为box下的li元素
        /* $('.box>li').mouseover(function(){
            //slideDown() 方法用于向下滑动元素。
            $(this).children().slideDown(500);
        });
        $('.box>li').mouseout(function(){
            //slideUp() 方法用于向上滑动元素。speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
            $(this).children().slideUp(500);
        }); */
        /* slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
        如果元素向下滑动，则 slideToggle() 可向上滑动它们。
       如果元素向上滑动，则 slideToggle() 可向下滑动它6们。
       该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 slideDown()，如果一个元素是可见的，则运行 slideUp() - 这会造成一种切换的效果。 */
        $('.box>li').hover(function(){//为导航中的每个选项注册移入移出事件
            //children()方法代替子元素选择器，获取指定元素的子元素。返回被选元素的所有直接子元素
            /* stop()方法用于停止动画效果，如元素上滑下滑，可以让动画队列后面的动画提前执行
            在不传递参数时，表示立即停止当前正在执行的动画，开始执行动画队列中的下一个动画 */
            $(this).children().stop().slideToggle(500);
         /* 1 链式编程：如果一直对同一个元素进行函数操作，可以使用".函数名"一直写下去
            2  因为jquery对象调用方法，返回值是jquery对象本身。就用 .语法调用自身方法*/
        });
    })
</script>
</html>
原文链接：https://blog.csdn.net/weixin_56296642/article/details/127164328