<!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>
原文：http://www.cnblogs.com/binmengxue/p/5288496.html