后面出现的其它元素引导的下拉列表菜单 - IE7(Bootstrap dropdowns menu

我使用的是引导2.3.1 http://twitter.github.io/bootstrap/index.html

所以我使用他们的“下拉菜单”类来创建一些简单快捷的使用下拉菜单，但在IE7某种原因，他们都出现在文字后我的网站上的其他元素。

测试链接： http://leongaban.com/_projects/defakto/CDS/

我加的z-index到我的CSS，但似乎仍然没有做任何事情，请大家帮忙！

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
    z-index: 10000;
}

IE9，Chrome浏览器，FF和其他现代无头痛的浏览器：

---

IE7> :(

HTML

<div class="header-nav">

<ul id="nav-account" role="navigation" class="pull-right">

    <!-- Language Dropdown Button -->
    <li id="language-btn">
        <a href="#" id="drop1" class="dropdown-toggle" data-toggle="dropdown">English</a>
        <img src="img/header-small-down-arrow.png" alt="grey triangle"/><!-- <span class="grey_triangle"></span>-->

        <!-- Language Dropdown Menu-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">English</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Spanish</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">German</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Japanese</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chinese</a></li>
        </ul>
    </li>

    <!-- User Dropdown Button -->
    <li id="account-btn">
        <a href="#" id="drop2" class="dropdown-toggle" data-toggle="dropdown">Logout</a>
        <img src="img/header-small-down-arrow.png" alt="grey triangle"/>
        <!-- <span class="grey_triangle"></span> -->

        <!-- User Dropdown Menu-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Logout</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Account</a></li>
        </ul>
    </li>
</ul>

Answer 1:

它是一种堆叠内容的问题！

即使您正在使用z-index的下拉，这只是相对于在同一堆叠环境的元素。 你需要一个补充z-index和position ，以得到这个工作的父元素。 在这种情况下，我会建议header-top div

Answer 2:

可以只使用z-index上定位元素（相对，固定/绝对值），所以尝试添加：

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
    position: relative;
    z-index: 10000;
}

Answer 3:

如果增加（在其他的答案中提到）的父元素的z-index的你没有工作，可能是因为父元素之一具有“溢出：隐藏;” 尝试删除它，看看它是否工作。

Answer 4:

只是要溢出的继承或可见。

它会解决这个问题。

overflow: visible !important;

它的工作对我来说赫然

Answer 5:

退房“ 追加到与追加到身体与直列例如 ”关于UI，引导LIB的最新版本。

Answer 6:

它是由在菜单中添加CSS解析。

position: relative;
z-index: 10000;

Answer 7:

我一直在使用时，同样的事情发生

overflow-x: hidden;

在父元素。 不得不将其关闭。

文章来源: Bootstrap dropdowns menus appearing behind other elements - IE7