导航栏第二个子菜单未正确定位

Question

此问题基于 SO Here 上的一个线程，这一切正常，除非第 2 级项目不在最上面。在给出的示例中，具有二级菜单的项目是第一项。如果您将项目向下移动一两个位置，第二层会在顶部打开。

CSS，看起来不错，我还认为这可能与线程 link 中的一个演示 Bootstrap 版本有关

    .sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

(Fiddle).

因此，为了消除该问题，我将其从 Fiddle 开始在沙箱中移动，但遇到了同样的问题，所以它似乎与我的代码或 Bootstrap 版本无关。我不喜欢这样做，我完全愿意使用不同的东西，只要我能有二级菜单，并在全尺寸屏幕上悬停时打开。

谢谢，

戴夫

Answer 1

已更新

我刚刚添加

.dropdown-menu .sub-menu{
  top: auto !important;
  margin-top:-30px !important;
}

它似乎工作正常，请检查这是否是您想要的。

这里是fiddle

导航栏第二个子菜单未正确定位

Navbar second submenu not positioned correctly

css

submenu

twitter-bootstrap