菜單
效果圖：
要點說明：1.簡單合理的html框架布局（只顯示其中一個列表框架）
<div>
<ul>
<li>
<a href="#">css</a>
<ul>
<li><a>樣式表1</a></li>
<li><a>樣式表2</a></li>
<li><a>樣式表3</a></li>
<li><a>樣式表4</a></li>
</ul>
</li>
</div>
2.css用父類繼承而不是後代（div>ul而不能用div ul）
<style type="text/css">
ul{
margin:0;
padding:0;
list-style:none;
}
div{
margin-bottom:10px;
width:400px;
height:30px;
background:#333;
}
div>ul>li{
float:left;
margin:0 5px;
width:100px;
text-align:center;
line-height:30px;
}
div>ul>li a{
display:block;
color:#fff;
text-decoration:none;
}
div>ul>li a:hover{
text-decoration:underline;
}
div>ul>li>ul{
display:none;
}
</style>
3.jquery
A.show()顯示隱藏元素
B.hide()隱藏顯示元素
C.show()和hide()顯示/隱藏元素是通過同時改變寬度，高度和不透明度實現的
<script type="text/javascript">
$(function(){
$("div>ul>li").hover(function(){
$(this).children("ul").show(200).css({"background":"#1376c9","display":"block"});
},function(){
$(this).children("ul").hide(200);
});
});
</script>