abstrak：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三級(jí)菜單</title> <script src="https://code.jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三級(jí)菜單</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
*{margin:0;padding: 0;}
ul li{list-style: none;}
div{width: 100%;height:40px; line-height:40px;}
.one{width:900px;height:40px;background: yellow;margin: 0 auto;background: #ccc;}
.one li{float:left;width:100px;height:40px;text-align: center;background: #2d2d2d;color:coral;}
.one li:hover{background: #000;}
.two{width:100px;height: 120px;position: relative;}
.three{width:100px;height: 40px;position: absolute; top: 40px; left:100px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.two').hide()
$('.three').hide()
$('.one>li').mouseover(function(){
$(this).find('.two').slideDown(500)
})
$('.one>li').mouseleave(function(){
$(this).find('.two').slideUp(500)
})
$('.two>li').mouseover(function(){
$(this).find('.three').slideDown(500)
})
$('.two>li').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
</head>
<body>
<div>
<ul class="one">
<li>我的首頁(yè)
<ul class="two">
<li>產(chǎn)品1</li>
<li>產(chǎn)品2
<ul class="three">
<li>產(chǎn)品4</li>
<li>產(chǎn)品5</li>
</ul>
</li>
<li>產(chǎn)品3</li>
</ul>
</li>
<li>個(gè)人介紹</li>
<li>產(chǎn)品目錄</li>
<li>聯(lián)系方式</li>
</ul>
</div>
</body>
</html>
Guru membetulkan：滅絕師太Masa pembetulan：2019-02-21 09:16:39
Rumusan guru：作業(yè)可以挑戰(zhàn)網(wǎng)頁(yè)效果,不要一味模仿老師代碼哦!理解思路很重要