三级下拉菜单（ps：定位确实是魔鬼）
<!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>
