如何对仪表板的菜单进行分组和动画处理

Question

我有一个仪表板，其中我的左侧面板中有菜单。现在我想要的是，菜单可以分组在一个下，即在主菜单下可能有两个或三个菜单等等菜单也应该是动画容量。这是说明我想要的图片。

这是负责的CSS

#doclist {
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.16) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(98%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.16)));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.16) 100%);
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.16) 100%);
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.16) 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.16) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#29000000', GradientType=1);
    width:14%;
    overflow: auto;
    border-right: solid 1px #ddd;
    padding: 10px;
    float: left;
}
#doclist ul {
    margin:0;
    list-style:none;
}
#doclist li {
    margin:0;
    padding:0 0 4px 16px;
    font-weight: bold;
    line-height:19px;
    background: url(../images/right-arrow.png) no-repeat 0 2px;
}
#doclist li a {
    color: #000;
    text-decoration: none;
}
#doclist li a:hover {
    color: #0080FF;
}
#documents {
    margin:0;
    padding:0;
}

和html部分

<div id="main">
    <div id="doclist" style="background-color: #fceabb">
        <ul id="documents">
            <li><a href="javascript:void(0);" rel="home" title="Home.jsp">Home</a></li> 
            <li><a href="javascript:void(0);" rel="details" title="forms/search" id="search">search</a></li>                    
            <li><a href="javascript:void(0);" rel="newcaller_details" title="forms/newcaller">New Caller</a></li>
            <li><a href="javascript:void(0);" rel="newsim_details" title="forms/newsim">Newsim</a></li>

        </ul>
    </div>

Answer 1

试试这个jquery解决方案http://jsfiddle.net/7zav5/2/

添加以下css

#documents li ul{
  display:none;
}

和带有jquery库的脚本

$(document).ready(function(e) {
  $('#documents li ').hover(function(){
      $(this).children('ul').clearQueue();
      $(this).children('ul').slideDown();
  }, 
  function(){
      $(this).children('ul').clearQueue();
      $(this).children('ul').slideUp();
  })  
});