Question

此问题基于SO Here上的一个主题。除非第二级项目不在顶部，否则这一切都很好。在给出的示例中，具有第二级菜单的项目是第一项。如果您将项目向下移动一个或两个点，则第二个级别将在顶部打开。

CSS，看起来不错，我也想也许它与线程中的一个demo链接中的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第二个子菜单未正确定位

1 个答案: