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

【问题标题】：Navbar second submenu not positioned correctly导航栏第二个子菜单未正确定位
【发布时间】：2017-03-16 03:37:46
【问题描述】：

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

CSS，看起来不错，我还认为可能与线程中的一个演示链接中的 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 版本无关。我不喜欢这样做，我完全愿意使用不同的东西，只要我可以有二级菜单，并在全尺寸屏幕上悬停时打开。

谢谢，

戴夫

【问题讨论】：

标签： css twitter-bootstrap submenu

【解决方案1】：

更新

我刚刚加了

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

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

这里是fiddle

【讨论】：

完美，我仍然处于学习曲线上，从桌面编码到网络，比预期的要陡峭，主要是使用 CSS。