jquery - 将滚动条添加到具有子菜单项的菜单项，而不隐藏子菜单项

Question

我需要在类(class)菜单列表中添加一个滚动条(见下图)。类(class)太多，翻页了。顶部导航栏是固定的，因此滚动页面没有帮助。

当我添加 css 时:

.navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu.courses {
   overflow-y: auto; /* or : scroll */
}

然后类(class)模块的 ul 不会显示(即下面示例图片中的 Orientation Module)。我假设这是因为子子菜单嵌套在具有 overflow-y:auto 的 ul 中，因此不显示。如何解决向类(class)子菜单添加滚动条但未隐藏类(class)子菜单项的问题。任何解决方案都可以，css、jquery 等。

HTML 和 css 相当多，因为它是在 moodle 中构建的，所以有很多事情要做。基本的 HTML 结构如下:

<ul class='nav'>
   <li class='dropdown'>
       <ul class='dropdown-menu'>
          <li class='dropdown-submenu courses'>
              <ul class='dropdown-menu'>
                 <li class='dropdown-submenu courses'>
                     <ul class='dropdown-menu'>
                         <li class='dropdown-submenu course-submenu'>
                         </li>
                         .
                         .
                         .
                     </ul>
                 </li>
                 .
                 .
                 .
              </ul>
          </li>
       </ul>
   </ul>
</ul>

编辑:正如我所说，有很多 css 对此有所贡献，但我将发布一个片段:

.navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu {
  border: none;
  background: #2d2e2e;
  padding: 0px;
  border-radius: 0px;
  max-height: none !important;
}

.navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu.courses{
  overflow-y: auto !important;
}

Answer 1

您应该为 ul 指定 X 像素的最大高度并应用 overflow-y: scroll;。