jQuery简单实现二级下拉菜单

HTML部分:

<body>
	<nav><ul>
		<li>首页</li>
		<li>联系方式
			<ul>
				<li>QQ号码</li>
				<li>微博</li>
				<li>微信</li>
			</ul>
		</li>
		<li>我的网站
			<ul>
				<li>乐遇网</li>
				<li>十月梦想</li>
				<li>DEMO</li>
			</ul>
		</li>
		<li>我的作品
			<ul>
				<li>二级菜单</li>
				<li>京东静态</li>
			</ul>
		</li>
		<li>关于</li>
	</ul></nav>
</body>

CSS部分:

/*二级菜单样式*/
*{
padding:0;
margin:0;
}
body{
background: pink;
}
nav {
text-align:center;
margin:0 auto;
background:rgba(0,0,0,0.6);
width:100%;
height:80px;
}
nav ul li{
float:left;
list-style: none;
width:17%;
height:15px;
font-size:30px;
color:white;
padding:20px;
}
/*nav ul li{
background: #62aeea;
height:40px;
}*/
nav ul li ul li{
clear:both;
width:180px;
height:40px;
display: none;
/*box-sizing: border-box;*/
}

jquery部分:

<!-- 引入jquery -->
	<script type="text/javascript" src="jquery-1.11.3.js"></script>
	<script type="text/javascript">
		$(function(){
			$('nav ul li').hover(function(){
				$(this).css({'background':'#26aeea','height':'40px'}).siblings().css({'background':'rgba(0,0,0,0.0)'})
				$(this).find('li').show();//滑过一级二级显示
				$(this).find('li').css({'width':'100%','margin-left':'-20px'})
			},function(){
				$(this).find('li').siblings().hide();//滑过的兄弟隐藏
			})
		})
	</script>

下拉菜单原理:滑过一级的li才让第二层的li显示,利用jq简单的抓取元素,让一级下的二级li显示就能解决,使用jq比css的思路更加明确!