Jquery 将滚动条添加到包含子菜单项的菜单项，而不隐藏子菜单项

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

当我添加css时：

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

然后，课程模块的ul不显示（即下面示例图片中的方向模块）。我假设这是因为子菜单嵌套在ul中，它具有overflow-y:auto，因此不显示。如何解决将滚动条添加到课程子菜单但不隐藏课程子菜单项的问题。任何解决方案都可以，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>

---

您应该给

ul

一个X像素的最大高度，并应用

overflow-y:scroll
这将是一个糟糕的用户界面，用户体验也不会好。但在这一点上，您可以在整个子导航中添加一个容器，使其最大高度小于您期望浏览器显示的高度，然后滚动它。这样，整个导航将在该元素中打开，并显示滚动条-因为您已经将鼠标指针放在其中，您只需转动鼠标即可显示进一步向下的项目。正如我所说的，但是你应该考虑一个更清洁的解决方案，比如超级菜单风格等等。
 < P>我用它来解决我的问题，这是一个jQuery解决方案。p>
这不完全是我想要的，但事实证明它比滚动条更优雅，而且我没有嵌套菜单问题。
这也有同样的问题。卷轴工作正常，这不是问题所在。当添加滚动功能时，子菜单项会消失。我想这是因为子菜单嵌套在课程子菜单中，因此css认为它是溢出的一部分。你能发布css吗？我现在添加了一些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;
}