Jquery 用于带有子导航的菜单的垂直滚动条

我想创建一个包含大量子导航的垂直菜单，因为子导航的数量超出了窗口的大小。如果我给出

溢出：auto和第三级菜单中的特定高度将不可见。我看到了滚动导航，但无法正确使用

在此处检查工作代码：

这是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>

html模型。。。差不多

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

上面的jquery将覆盖下面css中设置的默认最小高度

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

希望这有帮助
您找到了解决方案吗？
$(.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);}); 

});

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