多联动导航 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航</title>
		<script src="js/jquery-1.7.2.min.js"></script>
		<style>
			*{
				padding:0;
				margin:0;
			}
			ul{list-style:none;}
			.objUl{
				width:300px;
			}
			.objUl li a{
				  display: block;
				  height:40px;
				  line-height: 40px;
				  background:#007AFF;
				  border-bottom:1px solid #005599;
				  color:#fff;
				  text-decoration: none;
				  padding-left:10px;
			}
			.objUl li a:hover{
				background: #0088BB;
			}
			.objUlChildren li a{
				background:#069FFF;
			}

		</style>
	</head>
	<body>
		<ul class="objUl">
			<li><a href="#">首页</a></li>
			<li><a href="#">我的</a>
			    <ul  class="objUlChildren" style="display: none;">
			    	<li><a href="#">我的生活</a></li>
			    	<li><a href="#">我的学习</a></li>
			    	<li><a href="#">我的工作</a></li>
			    </ul>
			</li>
			<li><a href="#">联系我</a>
				<ul class="objUlChildren" style="display: none;">
			    	<li><a href="#">我的地址</a></li>
			    	<li><a href="#">我的电话</a></li>
			    </ul>
			</li>
		</ul>
		<script>
			$(".objUl li").click(function(){
			 	$(".objUlChildren").hide();
			 	$(this).children().show();
			 })
		</script>
	</body>
</html>

　　

posted @ 2016-03-17 18:09  归尘2016  阅读(249)  评论(0)  编辑  收藏  举报