abstrakt：<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三級(jí)下拉菜單</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 40px;
background: #000;
}
ul {
list-style: none;
}
.one {
width: 1200px;
margin: 0 auto;
text-align: center;
}
ul li {
width: 120px;
line-height: 40px;
float: left;
color: #fff;
}
ul li:hover {
background: #fff;
color: #000;
}
.two li {
background: #000;
position: relative;
}
.three {
position: absolute;
left: 120px;
top: 0;
}
</style>
</head>
<body>
<div>
<ul>
<li>網(wǎng)站首頁(yè)</li>
<li>關(guān)于我們</li>
<li>新聞中心
<ul>
<li>公司新聞</li>
<li>行業(yè)新聞
<ul>
<li>三級(jí)菜單</li>
<li>三級(jí)菜單</li>
<li>三級(jí)菜單</li>
<li>三級(jí)菜單</li>
</ul>
</li>
<li>最新動(dòng)態(tài)</li>
<li>要點(diǎn)新聞</li>
</ul>
</li>
<li>產(chǎn)品介紹
<ul>
<li>產(chǎn)品類一</li>
<li>產(chǎn)品類二</li>
<li>產(chǎn)品類三</li>
<li>產(chǎn)品類四</li>
<li>產(chǎn)品類五</li>
</ul>
</li>
<li>工程案例</li>
<li>售后服務(wù)</li>
<li>相關(guān)知識(shí)
<ul>
<li>常規(guī)知識(shí)</li>
<li>高級(jí)知識(shí)
<ul>
<li>知識(shí)1</li>
<li>知識(shí)2</li>
<li>知識(shí)3</li>
<li>知識(shí)4</li>
</ul>
</li>
<li>初級(jí)知識(shí)</li>
</ul>
</li>
<li>人才招聘</li>
<li>在線留言</li>
<li>聯(lián)系我們</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('.three').hide();
$('.two').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>
</body>
</html>
Korrigierender Lehrer：滅絕師太Korrekturzeit：2019-02-26 09:15:49
Zusammenfassung des Lehrers：作業(yè)完成的不錯(cuò)!作業(yè)代碼要跳出老師思維!