Jquery制作导航菜单的问题

代码很简单
html 代码如下
 <div class="menu_ul">
    <span>系统设置</span>
  
    <a href="" class="menu_li">基本信息</a>
    <a href="" class="menu_li">关于我们</a>
    </div>
    
    
    <div class="menu_ul">
    <span>产品管理</span>
    <a href="" class="menu_li">类别列表</a>
    <a href="" class="menu_li">添加产品</a>
    <a href="" class="menu_li">产品列表</a>
    </div>Css 代码如下
.menu_ul{ width:215px; height:35px; border:solid 1px #cccccc; line-height:35px; cursor:pointer;}
.menu_li{width:215px;  display:none; height:30px; float:left }Jquery 代码如下
jQuery(function(){
$(".menu_ul").click(function(){
$(this).children("a").show("slow").end().siblings().children("a").hide();
});
});现在就是 要的效果http://www.6yang.net/shownews.asp?id=797&BigClass=%C7%B0%B6%CB%BC%BC%CA%F5
但我的代码都差不多 
就是 子菜单重叠到下面的 而不会划出位置显示子菜单....各位帮帮我
我要疯了..

解决方案 »

  1.   


    <html>
    <head>
    <style type="text/css">
       .menu_ul{ width:215px; height:100px; border:solid 1px #cccccc; line-height:35px; cursor:pointer;}
       .menu_li{width:215px; display:none; height:20px; float:left }</style>
    <script type="text/javascript" language="javascript" src="/Script/jquery-1.4.2.js">
    </script>
    <script language="javascript" type="text/javascript" >
    $(document).ready(function()
    {
    $(".menu_ul").click(function(){
      $(this).children("a").toggle();
    });    
    });
    </script>
    </head>
    <body>
    <div class="menu_ul">
      <span>系统设置</span>
       
      <a href="" class="menu_li">基本信息</a>
      <a href="" class="menu_li">关于我们</a>
      </div>
        
        
      <div class="menu_ul">
      <span>产品管理</span>
      <a href="" class="menu_li">类别列表</a>
      <a href="" class="menu_li">添加产品</a>
      <a href="" class="menu_li">产品列表</a>
      </div>
    </body>
    </html>
    你的menu_ul的高度设置的小  只够显示一个menu_li