摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三级导航栏</title> <script src="st
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级导航栏</title>
<script src="static/jquery-3.3.1.min.js"></script>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
.main{width:900px;height:40px;background:black;margin:20px auto;}
ul li{width:120px;height:40px;border-right:1px solid white;float:left;color:white;line-height:40px;text-align:center;cursor:pointer;}
.two li{width:120px;height:40px;background:#333;position:relative;}
.two li:hover{background:black;}
.three{position:absolute;top:0;left:121px;}
</style>
</head>
<body>
<div class="main">
<ul class="one">
<li>首页</li>
<li>产品
<ul class="two">
<li>产品1</li>
<li>产品2
<ul class="three">
<li>产品1.1</li>
<li>产品1.2</li>
<li>产品1.3</li>
<li>产品1.4</li>
<li>产品1.5</li>
</ul>
</li>
<li>产品3</li>
<li>产品4</li>
<li>产品5</li>
</ul>
</li>
<li>公司新闻</li>
<li>行业新闻
<ul class="two">
<li>产品1</li>
<li>产品2
<ul class="three">
<li>产品1.1</li>
<li>产品1.2</li>
<li>产品1.3</li>
<li>产品1.4</li>
<li>产品1.5</li>
</ul>
</li>
<li>产品3</li>
<li>产品4</li>
<li>产品5</li>
</ul>
</li>
<li>联系我们</li>
</ul>
</div>
<script>
$(document).ready(function(){
$(".three").hide();
$(".two").hide();
$(".one>li").mouseenter(function(){
$(this).find(".two").slideDown(500);
});
$(".one>li").mouseleave(function(){
$(this).find(".two").slideUp(500);
});
$(".two>li").mouseenter(function(){
$(this).find(".three").slideDown();
});
$(".two>li").mouseleave(function(){
$(this).find(".three").slideUp();
});
});
</script>
</body>
</html>
批改老师：西门大官人批改时间：2019-04-02 11:17:43
老师总结：作业写的不错，还可以用css来实现该功能，感兴趣的话可以尝试一下
