abstract：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>三级下拉菜单</title> <style type="text/css"> *{margin: 0px;padding: 0px;} div{width:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三级下拉菜单</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
div{width: 1000px;height: 40px;background-color: #000;margin: 0 auto;color: #FFF;}
li{width: 200px;line-height: 40px;list-style: none;line-height: 40px;float: left;text-align: center;}
.box2 li{width: 200px;line-height: 40px;background-color: #000;height: 40px;}
.box3{position: relative;float: left;top: -40px;left: 200px;}
</style>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.box2').hide()
$('.box3').hide()
$('.box5').mouseover(function(){
$(this).find('.box2').slideDown(500)
})
$('.box5').mouseleave(function(){
$(this).find('.box2').slideUp(500)
})
$('.box4').mouseover(function(){
$(this).find('.box3').slideDown(500)
})
$('.box4').mouseleave(function(){
$(this).find('.box3').slideUp(500)
})
})
</script>
</head>
<body>
<div id="menu">
<ul class="box1">
<li>首页</li>
<li class="box5">产品
<ul class="box2">
<li>产品一</li>
<li class="box4">产品二
<ul class="box3">
<li>产品一</li>
<li>产品二</li>
<li>产品三</li>
</ul>
</li>
<li class="box4">产品三
<ul class="box3">
<li>产品一</li>
<li>产品二</li>
<li>产品三</li>
</ul>
</li>
<li>产品四</li>
</ul>
</li>
<li class="box5">服务
<ul class="box2">
<li>服务一</li>
<li class="box4">服务二
<ul class="box3">
<li>服务一</li>
<li>服务一</li>
</ul>
</li>
<li>服务三</li>
</ul>
</li>
<li>品质</li>
<li>关于</li>
</ul>
</div>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-06-06 09:46:29
Teacher's summary：完成的不错。三级联动在页面展示中，用到的比较频繁，比如分类页会有二级，加商品，就是三级。继续加油。