Bootstrap下拉菜单出现在其他元素后面 - IE7

Question

我正在使用Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html

所以我正在使用他们的"下拉菜单"类来创建一些简单的快速使用下拉菜单,但由于某些原因,在IE7上,它们出现在我网站上的文本和其他元素后面.

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

我在我的CSS中添加了z-index,但似乎仍然没有做任何事情,请帮忙!

.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在下拉列表中使用它,它也仅与相同堆叠上下文中的元素相关.您需要将a z-index和a 添加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(如其他答案中所述)对你不起作用,则可能是父元素之一具有"overflow:hidden;" 尝试删除它,看看它是否有效.

Answer 4

只需将溢出设置为继承或可见。

它将解决问题。

overflow: visible !important;

它对我很有用