三级下拉菜单（ps：定位确实是魔鬼）

abstract：<!DOCTYPE html> <html> <head> <title>php中文网</title> <link rel="icon" type="image/x-icon" href="http://www.php.cn/favicon

<!DOCTYPE html>
<html>
<head>
	<title>php中文网</title>
	<link rel="icon" type="image/x-icon" href="http://www.php.cn/favicon.ico">
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ph7.shengqianku.cn/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		*{margin:0 auto;padding: 0}
		ul{list-style: none;}
		  ul li{width: 100px;height: 35px;line-height: 35px; text-align:center;float: left;border-right: 1px;background: #000;color: #fff;}
		a{color:#fff;text-decoration: none;text-align: center;}

		.ll{float:left;}
		.l{float:left;margin: 15px 40px ;}
		.header{height: 70px;width: 100%;background: #000;}
		.two li{position: relative;top: 20px;}
		.three li{top: -35px;left: 100px;}
		
		
	</style>
</head>
<body>
	<div>
		<div class="header">
			<div class="logo">
				<a href="" class="ll"><img src="http://ph7.shengqianku.cn/1.jpg"></a>
			</div>
			<ul class="one">
				<li class="l"><a href="">首页</a></li>

				<li class="l"><a href="">视频教程</a></li>
				<li class="l"><a href="">社区问答</a>
					<ul class="two">
						<li >社区问答</li>
						<li >社区问答</li>
						<li >社区问答</li>
						<li >社区问答</li>
						<li >社区问答
							<ul class="three">
								<li>社区问答</li>
								<li>社区问答</li>
								<li>社区问答</li>
								<li>社区问答</li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="l"><a href="">技术文章</a></li>
				<li class="l"><a href="">编程词典</a></li>
				<li class="l"><a href="">特色课程</a></li>
				<li class="l"><a href="">菜鸟学堂</a></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.two').hide()
			$('.three').hide()
			$('.one>li').mouseover(function(){
				$(this).find('.two').slideDown(1000)
			})
			$('.one>li').mouseleave(function(){
				$(this).find('.two').slideUp(1000)
			})
			$('.two>li').mouseover(function(){
				$(this).find('.three').slideDown(500)
			})
			$('.two>li').mouseleave(function(){
				$(this).find('.three').slideUp(500)
			})
		})
	</script>
</body>
</html>

Correcting teacher：天蓬老师Correction time：2019-04-13 21:57:04
Teacher's summary：在前端, 大家视浮动为魔鬼, 绝对定位才能精确控制

三级下拉菜单（ps：定位确实是魔鬼）

Popular Entries