Implementation requirements:
1. Mouse slide a menu, the menu display corresponding secondary.
2. mouse to draw a menu, the corresponding two hidden menu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style>
li {
width: 100px;
height: 50px;
border: 5px solid
/*去除列表样式*/
list-style: none;
text-align: center;
line-height: 50px;
/*渐变色实现*/
background-image: linear-gradient(to right,skyblue,sandybrown);
border-radius: 5px;
}
.ul1>li{
float: left;
}
.ul2>li{
width: 90px;
position: relative;
left: -40px;
top: 10px;
}
</style>
</head>
<body>
<ul class="ul1">
<li>一级菜单1
<ul class="ul2">
<li>二级菜单11</li>
<li>二级菜单12</li>
<li>二级菜单13</li>
</ul>
</li>
<li>一级菜单2
<ul class="ul2">
<li>二级菜单21</li>
<li>二级菜单22</li>
<li>二级菜单23</li>
</ul>
</li>
<li>一级菜单3
<ul class="ul2">
<li>二级菜单31</li>
<li>二级菜单32</li>
<li>二级菜单33</li>
</ul>
</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function () { //JQ里当文档加载完之后就自动执行的一个函数
// 隐藏二级菜单栏
$(".ul2").stop().hide(); //注意：在执行新的动画之前必须将上一个动画关闭，不管以前有没有动画实现都要关闭，防止冲突！
var $li = $(".ul1>li");
$li.mouseenter(function () {
$(this).children(".ul2").stop().slideDown();
});
$li.mouseleave(function () {
$(this).children(".ul2").stop().slideUp();
})
})
</script>
</body>
</html>
