摘要：<!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>效果图：
批改老师：灭绝师太批改时间：2019-03-11 09:09:16
老师总结：作业提交的不错,完成的非常好!继续保持!
