<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>44-jQuery 下拉菜单</title>
<style type="text/css">
*{ /* 通配选择器*/
margin: 0; /*外边距：0*/
padding: 0; /*内边距：0*/
}
.daohang{ /* 导航样式*/
width: 80%; /*宽：80%*/
height: 40px; /* 高：40像素*/
border: #000000 solid 1px; /*边框：黑色 实线 1像素*/
background-color: chartreuse; /*背景颜色*/
border-radius: 10px; /*圆角：10像素*/
margin: 10px auto; /*外边距：上10像素 左右居中*/
}
.daohang>li{ /* 导航里面的li标签样式*/
float: left; /*浮动：左浮动*/
list-style: none; /*去除前面的点*/
/* border: #000000 solid 1px; */
background-color: #FFA500; /*背景颜色*/
width: 15%; /*宽：15%*/
height: 100%; /*高：100%*/
border-radius: 10px; /*圆角：10像素*/
margin-left: 4%; /*外左边距：4%*/
text-align: center; /*文字居中*/
line-height: 35px; /*行高：35像素*/
}
.sub>li{ /* 二级菜单里的里标签样式*/
list-style: none; /*去除前面的点*/
font-size: small; /*字体大小：小*/
background-color: #8B008B; /*背景颜色*/
border: #000000 solid 1px; /*边框：黑色 实线 1像素*/
border-bottom: none; /*下边框：空*/
margin-top: 5px; /* 上边距：5像素*/
}
.sub>li:hover{ /* 二级菜单里面的li标签的鼠标停留*/
background-color: red; /*背景颜色：红色*/
}
.sub{ /* 二级菜单样式*/
display: none; /*隐藏*/
}
</style>
<script src="../static/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
// 定义变量 装 二级菜单的代码
var $sub = $('<ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul>')
// 导航ul里面的li标签的移入移出事件
$(".daohang>li").hover(function(){
$(this).append($sub) // 为现在这个li标签添加二级菜单
$(".sub").stop() // 停止二级菜单的动画
$(".sub").slideDown(1000) // 用一秒的时间展开二级菜单
}, function(){ // 移出事件
$(".sub").stop() // 停止二级菜单的动画
$(".sub").slideUp(100) // 用100毫秒的时间收起二级菜单
})
})
</script>
</head>
<body>
<ul class="daohang"> <!-- 导航ul -->
<li>第一个 <!-- li标签 -->
<!-- <ul class="sub1">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul> -->
</li>
<li>第二个</li> <!-- li标签 -->
<li>第三个</li> <!-- li标签 -->
<li>第四个</li> <!-- li标签 -->
<li>第五个</li> <!-- li标签 -->
</ul>
</body>
</html>