Jquery实例教程:制作网页下拉菜单

菜单
效果图： 
 
要点说明：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>