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：完成的不錯。三級聯動在頁面展示中，用到的比較頻繁，比如分類頁會有二級，加商品，就是三級。繼續(xù)加油。