abstract：通过ul进行静态页面的导航菜单及子菜单的布局，利用jQuery的hide() mouseenter mouseover mouseleave find() slideDown slideUp等方法实现下拉菜单的子菜单隐藏、显示、通过鼠标移入、移出事件触发子菜单的显示与隐藏。<!DOCTYPE html> <html lang="en">
通过ul进行静态页面的导航菜单及子菜单的布局，利用jQuery的hide() mouseenter mouseover mouseleave find() slideDown slideUp等方法实现下拉菜单的子菜单隐藏、显示、通过鼠标移入、移出事件触发子菜单的显示与隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级子菜单作业</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
border-right: 1px solid rgb(180, 168, 168);
cursor: pointer;
}
.sub2 li {
width: 100px;
}
a {
color: #fff;
text-decoration: none;
}
.c {
margin: 0 auto;
}
.menu {
height: 40px;
background: rgb(197, 102, 102);
color: #444;
}
.menu .cent {
width: 960px;
height: 40px;
}
.subpannel {
position: relative;
background: pink;
height: 120px;
}
.subpannel li {
border: none;
}
.subpannel li:hover {
background: #ccc;
}
.sub3 {
position: relative;
top: -40px;
left: 100px;
height: 125px;
}
.sub3 li {
width: 100px;
background: indianred;
}
.sub3 li:hover {
color: #fff;
background: rgb(43, 25, 25);
}
</style>
</head>
<body>
<div class="menu">
<div class="c cent">
<!-- 一级菜单 -->
<ul class="sub">
<li><a href="">网站首页</a></li>
<li><a href="">企业荣誉</a></li>
<li><a href="">公司概况</a></li>
<li><a href="">公司文化</a></li>
<li><a href="">产品展示</a>
<!-- 二级菜单 -->
<ul class='subpannel'>
<li>民用装备</li>
<li class='sub2'>军用设备
<!-- 三级菜单 -->
<ul class='sub3'>
<li>军用电台</li>
<li>坦克</li>
<li>火箭车</li>
</ul>
</li>
<li>企业装备</li>
</ul>
</li>
<li> <a href="">在线论坛</a></li>
<li><a href="">意见反馈</a></li>
<li><a href="">联系方式</a></li>
</ul>
</div>
</div>
<script>
$(document).ready(function () {
//设置所有子菜单隐藏
$('.subpannel').hide();
$('.sub3').hide();
// 通过Mousemove /mouseover/mouseenter 触发鼠标移入事件
$('.sub>li').mousemove(function () {
// 利用find()找到子菜单元素通过slideDown()显示子菜单
$(this).find('.subpannel').slideDown(500);
})
// 通过Mouseleave /mouseout 触发鼠标移出事件
$('.sub>li').mouseleave(function () {
// 利用find()找到子菜单元素通过slideUp()隐藏子菜单
$(this).find('.subpannel').slideUp(500);
})
$('.subpannel>li').mouseover(function () {
$(this).find('.sub3').slideDown(500);
})
$('.subpannel>li').mouseleave(function () {
$(this).find('.sub3').slideUp(500);
})
})
</script>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-02-12 12:40:35
Teacher's summary：多级菜单,应用很广的, 不仅可以用到顶部主导航, 侧边导航也很常用, 例如一些商城左侧的商品列表