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

Question

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

当我添加 css:

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

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

.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;。

Answer 2

这会很糟糕 UI 并且用户体验也不会很好。但就此而言，您可以向整个子导航添加一个容器，使 max-height 小于您期望浏览器显示的内容并溢出滚动它。这样整个导航将在此元素中打开并显示滚动条 - 因为您已经将鼠标指针放在那里，您只需滚动鼠标即可显示更下方的项目。正如我所说，尽管您应该考虑更简洁的解决方案，例如大型菜单样式等。

Answer 3

我用它来解决我的问题，这是一个 jquery 解决方案。 https://css-tricks.com/long-dropdowns-solution/

这不是我想要的，但实际上比滚动条更优雅，而且我没有嵌套菜单问题。

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

Add scrollbar to menu item which has submenu items, without submenu items being hidden

html

css

jquery

moodle