效果：
html页面
<body>
<div class="menu">
<ul>
<li>
<a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<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>
<li><a href="#">二级菜单</a></li>
<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>
<li><a href="#">二级菜单</a></li>
<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>
<li><a href="#">二级菜单</a></li>
<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>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</div>
</body>
JS代码
<script>
$(function() {
$(".menu>ul>li").hover(function() {
$(this.querySelector("ul")).slideToggle()
})
})
</script>
JS代码详解：
-
$(function() { ... }): 这是jQuery的快捷方式，用于在DOM加载完成后执行代码。它等价于 $(document).ready(function() { ... })，表示代码会在页面加载完成后执行。
-
$(".menu>ul>li").hover(function() { ... }): 这是一个选择器，它选中所有具有"class"为"menu"的元素中的直接子元素的<li>（列表项）。然后，通过.hover()方法为这些<li>元素添加悬停事件的监听。
-
function() { ... }: 这是一个悬停事件的回调函数。当鼠标悬停在匹配的菜单项上时，这个函数会被执行。
-
$(this.querySelector("ul")).slid
Toggle(): 在悬停事件回调函数中，首先使用this来获取当前鼠标悬停的菜单项元素。然后，通过querySelector("ul")来选择这个菜单项元素下的<ul>（无序列表，也就是子菜单）元素。接着，通过.slideToggle()方法来切换子菜单的显示状态，如果子菜单是隐藏的，则显示它；如果子菜单是显示的，则隐藏它。.slideToggle()方法会为显示和隐藏添加动画效果。
CSS代码
* {
padding: 0;
margin: 0;
}
.menu {
background: #910000;
}
.menu>ul {
display: flex;
justify-content: space-between;
width: 80%;
margin: auto;
}
.menu ul li {
list-style: none;
}
.menu>ul>li {
position: relative;
}
.menu ul li a {
padding: 10px;
display: block;
color: white;
text-decoration: none;
}
.menu ul ul {
position: absolute;
width: 100%;
background: #910000;
display: none;
}
CSS代码详解：
* 选择器将页面上所有元素的内边距和外边距设置为0，以消除默认的内边距和外边距。.menu 类选择器选中具有 “menu” 类的元素，设置了背景颜色为深红色 (#910000)。.menu>ul 选择器选中直接子元素是 ul 的 .menu 元素，将其样式设置为弹性布局 (display: flex)，并使用 justify-content: space-between 属性使子元素在水平方向上等间距分布。.menu ul li 选择器选中所有 ul 元素下的 li 元素，并移除其默认的列表样式。.menu>ul>li 选择器选中 .menu 元素下的直接子元素 li，设置其位置为相对定位。.menu ul li a 选择器选中所有 ul 元素内的 li 元素中的锚点 (<a> 标签)，设置了内边距、显示为块级元素、文字颜色为白色、去除下划线。.menu ul ul 选择器选中 ul 元素的子 ul 元素（子菜单），设置其位置为绝对定位，宽度为100%，背景颜色与父菜单一致，且初始状态为不显示。
