abstrakt：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0}
.cont{width:1200px;height: 40px; margin:0 auto; }
ul{list-style: none;}
ul li{width: 120px;height: 40px;line-height: 40px;text-align: center;float: left;border-right: 1px solid pink;cursor: pointer;background-color: orange;}
ul li:hover{background-color: #ccc}
.nav-t1 li{position: relative;border: 0px;}
.nav-t1 ul{position: absolute;display: none}
.nav-t2 li{position: relative}
.nav-t2 ul{position: absolute;left: 120px;top: 0px;display: none}
</style>
<body>
<div class="cont">
<ul class="nav-t1">
<li>火影忍者
<ul class="nav-t2">
<li>新時代</li>
<li>疾風傳
<ul class="nav-t3">
<li>終末之谷1</li>
<li>終末之谷2</li>
<li>終末之谷3</li>
</ul>
</li>
<li>完結篇</li>
</ul>
</li>
<li>海賊王</li>
<li>全職獵人</li>
<li>我的英雄學院</li>
<div style="clear:both"></div>
</ul>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$(".nav-t1>li").hover(function () {
$(this).find(".nav-t2").slideDown(1000);
},function () {
$(this).find(".nav-t2").slideUp(1000);
})
$(".nav-t2>li").hover(function () {
$(this).find(".nav-t3").slideDown(1000);
},function () {
$(this).find(".nav-t3").slideUp(1000);
})
})
</script>效果圖：
Korrigierender Lehrer：滅絕師太Korrekturzeit：2019-03-11 09:09:16
Zusammenfassung des Lehrers：作業(yè)提交的不錯,完成的非常好!繼續(xù)保持!