隐藏x轴溢出时，不会出现水平下拉子菜单

Question

我需要一个bootstrap下拉子菜单按钮。我通过谷歌搜索找到了something like this。我需要这个按钮可滚动。所以，我添加了这个类：

<ul class="dropdown-menu scrollable-dropdown">
  <li></li>
</ul>

.scrollable-dropdown {
    height: auto;
    max-height: 150px;
    overflow-x: hidden;
    width: 200px;
}

但是，添加后，子菜单没有显示。

Here is the fiddle with problem

Answer 1

使用overflow：auto;

它有效，但只是不会让菜单处于更好的状态（看起来很明智）。 您应该尝试将子菜单放在原始主菜单选项下面，可能有一个不同的CSS，以使其可以理解为子菜单。

将此选项与overflow：auto一起使用。 使用position：relative并删除top：0;

.dropdown-menu .sub-menu {
    position: relative;
    display:none;
    margin-top: -1px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left-color:#fff;
    box-shadow:none;
}

This is the fiddle with the edit