Html bootstrap 多级菜单项与其他项混合答案

【问题标题】：Html bootstrap multilevel menu items are mixed with other itemsHtml bootstrap 多级菜单项与其他项混合
【发布时间】：2016-07-30 23:07:08
【问题描述】：

我想获得一些关于我正在创建的网站的帮助，但遗憾的是我并不擅长这个。该网站的一部分由 2 列组成，多级菜单/列表位于第一列。当您单击在该菜单的项目上，它不会覆盖第二列内的文本。我想让你告诉我如何让我的菜单放在这些上面，这样它就不会混合并变成这样。这就是它的外观.

这是我的 CSS。

.dropdown-submenu {
    position: relative;
}


.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

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

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

【问题讨论】：

创建 JSFiddle 或 CodePen 和/或发布相关的 HTML 代码可能是个好主意。如果没有它，很难看出会发生什么。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我的猜测是您需要在子菜单中添加更高的 z-index。 $ 图标似乎具有较高的 z-index，使其位于子菜单的顶部。

尝试添加类似的东西

.dropdown-submenu {
    position: relative;
    z-index: 1000; /* A high number */
}

如果这不起作用，我们需要查看 JSFiddle 中的适当示例或指向实际代码的链接

P.s：我会用希腊语回复，但这是一个国际网站。如果您需要帮助，请给我留言，我们可以用希腊语交谈...

【讨论】：