<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding:0}
li {list-style: none;}
.nav {
margin: 50px 0 0 50px;
width:300px;height: 50px;
}
.nav>li {
width: 100px;height: 50px;
text-align: center;line-height: 50px;
background-color: antiquewhite;
cursor: pointer;
float: left;
}
.nav>li:hover{background-color: rgb(194, 181, 165);}
.sub {
display: none;
background-color: rgb(99, 89, 75);
color: white;
}
.sub>li:hover {background-color: rgb(156, 142, 121);}
.box {
width: 300px;height: 300px;
background-color: orange;
margin: 0px 0 0 50px;
text-align: center;
/* 添加line-height属性导致一级菜单2展开失败 */
line-height: 300px;
}
</style>
</head>
<body>
<ul class="nav">
<li>一级菜单1
<ul class="sub">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
<li>二级菜单4</li>
<li>二级菜单5</li>
<li>二级菜单6</li>
<li>二级菜单7</li>
<li>二级菜单8</li>
</ul>
</li>
<li>一级菜单2
<ul class="sub">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
<li>二级菜单4</li>
<li>二级菜单5</li>
<li>二级菜单6</li>
<li>二级菜单7</li>
<li>二级菜单8</li>
</ul>
</li>
<li>一级菜单3
<ul class="sub">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
<li>二级菜单4</li>
<li>二级菜单5</li>
<li>二级菜单6</li>
<li>二级菜单7</li>
<li>二级菜单8</li>
</ul>
</li>
</ul>
<div class="box">我是另一个元素</div>
<script src="jquery-3.5.1.js"></script>
<script>
$('.nav>li').mouseenter(function(){
$(this).children('.sub').stop()
$(this).children('.sub').slideDown(500)
})
$('.nav>li').mouseleave(function(){
$(this).children('.sub').stop()
$(this).children('.sub').slideUp(100)
})
</script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
