如何使子菜单可滚动

Question

我至少有一个子菜单很长，另一个正在准备中。它在桌面和移动设备上看起来不错，但我想让这些子菜单可以滚动，这样就不会太长 and/or 让人不知所措。

我还没有达到 JavaScript，所以我需要一个简单的 CSS 技巧。我最接近的位于此处：

Scrolling Submenus

但它把所有东西都集中起来，只出现最后一个菜单项。我试过让它更长，但似乎没有任何效果。

CSS:

.navbar-inverse .dropdown-menu > li > a {
  width: 185px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 1000 !important;
  position: fixed !important;
}

有什么建议吗？

partyfavorz.com

Answer 1

为了让 div 可以垂直滚动，您需要有一个比正在滚动的 div 高度小的父项。

.parent {
    height: 300px;
    width: 300px;
    overflow-y: auto;
}

.scrollable {
  height: 600px;
  width: 300px;
  background: gray;
}

您可以在 link https://jsfiddle.net/sebdum/npz8u6x2/1/

上查看示例

Answer 2

只需为您的列表设置高度并溢出-y:

.dropdown-menu {
     height: 500px; // change it as you like
     overflow-y: auto;
}

如何使子菜单可滚动

How to make sub-menus scrollable

css

horizontal-scrolling

submenu

CSS: