摘要：<!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>三级下拉菜单</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>网站首页</li>
<li>关于我们</li>
<li>新闻中心
<ul>
<li>公司新闻</li>
<li>行业新闻
<ul>
<li>三级菜单</li>
<li>三级菜单</li>
<li>三级菜单</li>
<li>三级菜单</li>
</ul>
</li>
<li>最新动态</li>
<li>要点新闻</li>
</ul>
</li>
<li>产品介绍
<ul>
<li>产品类一</li>
<li>产品类二</li>
<li>产品类三</li>
<li>产品类四</li>
<li>产品类五</li>
</ul>
</li>
<li>工程案例</li>
<li>售后服务</li>
<li>相关知识
<ul>
<li>常规知识</li>
<li>高级知识
<ul>
<li>知识1</li>
<li>知识2</li>
<li>知识3</li>
<li>知识4</li>
</ul>
</li>
<li>初级知识</li>
</ul>
</li>
<li>人才招聘</li>
<li>在线留言</li>
<li>联系我们</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>
批改老师：灭绝师太批改时间：2019-02-26 09:15:49
老师总结：作业完成的不错!作业代码要跳出老师思维!
