サマリー：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.nav{width:1000px;margin:20px auto;height:30px;cursor:pointer;background-color:#333333}
.two{margin: 0;padding: 0;}
.nav>ul>li{list-style:none;float:left;border-right:1px white solid;line-height: 30px;width:120px;text-align: center}
.nav>ul>li a{text-decoration: none;color:white;cursor:pointer}
.two,.three{display:none;margin:0;padding:0;background-color:#333333;width:100%}
.two>li{position:relative}
.three{position:absolute;left:100%;top:0;}
.two li,.three li{list-style: none;text-align:center;height: 30px;line-height:30px;border-bottom: dotted 1px white}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.nav>ul>li').mouseenter(function(){
$(this).find('.two').slideDown(1000)
})
$('.nav>ul>li').mouseleave(function(){
$(this).find('.two').slideUp(1000)
})
$('.nav>ul>li>ul>li').mouseenter(function(){
$(this).find('.three').slideDown(1000)
})
$('.nav>ul>li>ul>li').mouseleave(function(){
$(this).find('.three').slideUp(1000)
})
})
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">產(chǎn)品一</a>
<ul class="two">
<li><a href="#">產(chǎn)品二</a></li>
<li><a href="#">產(chǎn)品二</a></li>
<li>
<a href="#">產(chǎn)品二</a>
<ul class="three">
<li><a href="#">產(chǎn)品三</a></li>
<li><a href="#">產(chǎn)品三</a></li>
<li><a href="#">產(chǎn)品三</a></li>
<li><a href="#">產(chǎn)品三</a></li>
<li><a href="#">產(chǎn)品三</a></li>
<li><a href="#">產(chǎn)品三</a></li>
<li><a href="#">產(chǎn)品三</a></li>
</ul>
</li>
<li><a href="#">產(chǎn)品一</a></li>
<li><a href="#">產(chǎn)品一</a></li>
<li><a href="#">產(chǎn)品一</a></li>
<li><a href="#">產(chǎn)品一</a></li>
</ul>
</li>
<li>
<a href="#">新聞中心</a>
<ul class="two">
<li><a href="#">新聞二</a></li>
<li><a href="#">新聞二</a></li>
<li><a href="#">新聞二</a></li>
<li><a href="#">新聞二</a></li>
<li><a href="#">新聞二</a></li>
<li><a href="#">新聞二</a></li>
<li><a href="#">新聞二</a></li>
</ul>
</li>
<li><a href="#">公司培訓(xùn)</a></li>
<li><a href="#">考試范圍</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
</div>
</body>
</html>
添削の先生：滅絕師太添削時(shí)間：2019-01-08 16:09:15
先生のまとめ：完成的不錯(cuò)，但是.nav>ul>li>ul>li不建議寫這么長(zhǎng)喲！可以適當(dāng)?shù)募由蟘lass