您的位置 >>> 星想互联 >>> 编程技术 >>> 响应式布局
JQUERY树型菜单的制作
点击数:3059  发布时间2013-04-29 19:48:08

<style>
ul,li{
 list-style:none;line-height:2
}
#list>li{
 font-size:14px;font-weight:bold;
}
#list>li li{
 font-size:12px;font-weight:normal;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function(){
 $("#list>li>ul").hide()
 $("#list>li>a").hover(function(){
  $("#list>li>ul").hide()
  $(this).parent().find("ul").show()
 })
})

</script>
</head>

<body>
<p>dddd</p>

<ul id="list">

    <li>
     <a href="#">一级菜单1</a>
        <ul>
       
           <li>一级菜单1下的二级菜单1</li>
       
           <li>一级菜单1下的二级菜单2</li>
       
           <li>一级菜单1下的二级菜单3</li>
       
        </ul>
   
    </li>

    <li>
     <a href="#">一级菜单2</a>
        <ul>
       
           <li>一级菜单2下的二级菜单1</li>
       
           <li>一级菜单2下的二级菜单2</li>
       
           <li>一级菜单2下的二级菜单3</li>
       
        </ul>
   
    </li>

    <li>
     <a href="#">一级菜单3</a>
        <ul>
       
           <li>一级菜单3下的二级菜单1</li>
       
           <li>一级菜单3下的二级菜单2</li>
       
           <li>一级菜单3下的二级菜单3</li>
       
        </ul>
   
    </li>

</ul>

来源:星想互联