帶子導航菜單的垂直滾動條

Question

我想創建一個包含大量子導航的垂直菜單，因爲子導航編號超出了窗口大小。如果我給overflow: auto;和一個特定的高度，第三級菜單將不可見。我已經看到導航滾動，但不能正確。

檢查這裏的工作代碼：http://jsfiddle.net/PU9tr/

下面是HTML

<ul class="ver-menu"> 
     <li><a href="#">Ver Menu- 1</a> 
      <ul class="sub-menu-1"> 
       <li><a href="#">Ver sub Menu- 1</a> 
        <ul class="sub-menu-2"> 
        <li><a href="#">Ver sub Menu- 1</a></li> 
        <li><a href="#">Ver sub Menu- 2</a></li> 
        <li><a href="#">Ver sub Menu- 3</a></li> 
        <li><a href="#">Ver sub Menu- 4</a></li> 
       </ul> 
       </li> 
       <li><a href="#">Ver sub Menu- 2</a> 
        <ul class="sub-menu-2"> 
        <li><a href="#">Ver sub Menu- 1</a></li> 
        <li><a href="#">Ver sub Menu- 2</a></li> 
        <li><a href="#">Ver sub Menu- 3</a></li> 
        <li><a href="#">Ver sub Menu- 4</a></li> 
       </ul> 
       </li> 
       <li><a href="#">Ver sub Menu- 3</a></li> 
       <li><a href="#">Ver sub Menu- 4</a></li> 
       <li><a href="#">Ver sub Menu- 5</a></li> 
       <li><a href="#">Ver sub Menu- 6</a></li> 
       <li><a href="#">Ver sub Menu- 7</a></li> 
       <li><a href="#">Ver sub Menu- 8</a></li> 
       <li><a href="#">Ver sub Menu- 9</a></li> 
       <li><a href="#">Ver sub Menu- 10</a></li> 
       <li><a href="#">Ver sub Menu- 11</a></li> 
       <li><a href="#">Ver sub Menu- 12</a></li> 
       <li><a href="#">Ver sub Menu- 13</a></li> 
       <li><a href="#">Ver sub Menu- 14</a></li> 
       <li><a href="#">Ver sub Menu- 15</a></li> 
       <li><a href="#">Ver sub Menu- 16</a></li> 
       <li><a href="#">Ver sub Menu- 17</a></li> 
       <li><a href="#">Ver sub Menu- 18</a></li> 
       <li><a href="#">Ver sub Menu- 19</a></li> 
       <li><a href="#">Ver sub Menu- 20</a></li> 
       <li><a href="#">Ver sub Menu- 21</a></li> 
       <li><a href="#">Ver sub Menu- 22</a></li> 
       <li><a href="#">Ver sub Menu- 23</a></li> 
       <li><a href="#">Ver sub Menu- 24</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Ver Menu- 2</a> 
      <ul class="sub-menu-1"> 
       <li><a href="#">Ver sub Menu- 1</a></li> 
       <li><a href="#">Ver sub Menu- 2</a></li> 
       <li><a href="#">Ver sub Menu- 3</a></li> 
       <li><a href="#">Ver sub Menu- 4</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Ver Menu- 3</a> 
      <ul class="sub-menu-1"> 
       <li><a href="#">Ver sub Menu- 1</a></li> 
       <li><a href="#">Ver sub Menu- 2</a></li> 
       <li><a href="#">Ver sub Menu- 3</a></li> 
       <li><a href="#">Ver sub Menu- 4</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Ver Menu- 4</a></li> 
     <li><a href="#">Ver Menu- 5</a></li> 
     <li><a href="#">Ver Menu- 6</a></li> 
    </ul> 

這裏是CSS

  #page-wrap       { width: 960px; margin: 25px auto; } 
      p         { margin: 0 0 8px 0; } 
      a         { text-decoration: none; } 
      img         { vertical-align: middle; } 
      a img        { border: 0; 180} 
      ul         { list-style: none; } 
      h1         { margin: 0 0 10px 0; } 
      .ver-menu{ margin:0; padding:0; width: 200px} 
      .ver-menu li{ margin:0; padding:0; display: block; position: relative;} 
      body        { font: 15px Helvetica, Sans-Serif; } 
      .ver-menu li a{ margin:0; padding:10px; display: block; background: #CCC; border-bottom: 1px dotted #999; color:#000;} 
      .sub-menu-1, .sub-menu-2 { 
       left: 161px; 
       position: absolute; 
       display: none; 
       top: 0; 
       width: 150px; 
       height: 150px; 
      } 
      .sub-menu-2{ left: 115px!important;} 
      .ver-menu li:hover .sub-menu-1, .sub-menu-1 li:hover .sub-menu-2{ display: block;} 
      .sub-menu-1 li{ position: relative;} 

Answer 1

樣機HTML的...像

<li> ... 
    <ul class='submenu'> 
    <li> ... 
    </li> 
    </ul> 
</li> 

我使用了一下的jQuery這樣

$(.submenu).each(function(index){ 
    // find the height of the li element - assumes all li's are the same height 
    var height=parseInt($(this).parent().css('line-height')); 
    // after 6 child elements the parent ul will display scrollbar 
    var num=Math.min(6,$(this).children().length); 
    $(this).css('min-height',function(){ return (height*num);}); 

}); 

上述jQuery將覆蓋默認的最小高度在CSS以下

.submenu { 
    min-height: 100px; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 
li { 
    line-height: 30px 
} 

希望設置這有助於