引导下拉菜单出现在其他元素后面——IE7。

I'm using Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html

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

So I'm using their 'dropdown-menu' class to create some simple quick use dropdown menus, but for some reason on IE7 they are appearing behind text and other elements on my site.

因此，我使用他们的“下拉菜单”类来创建一些简单快捷的下拉菜单，但由于某些原因，IE7在我的网站上出现了文本和其他元素。

Test Link: http://leongaban.com/_projects/defakto/CDS/

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

I added z-index to my CSS, but still doesn't seem to do anything, please help!

我将z索引添加到我的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 and other modern no headache browsers: 引导下拉菜单出现在其他元素后面——IE7。

IE9, Chrome, FF和其他现代无头痛浏览器:

IE7 >:(
引导下拉菜单出现在其他元素后面——IE7。

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>

7 个解决方案

#1

Its a stacking context issue!

这是一个堆叠的上下文问题!

Even though you are using z-index on the dropdown, it is only relative to elements in the same stacking context. You need to add a z-index and a position to a parent element in order to get this to work. In this case I would recommend the header-top div

即使您在下拉菜单上使用z索引，它也只是相对于同一堆叠上下文中的元素。您需要为父元素添加一个z索引和一个位置，以便使其工作。在这种情况下，我推荐header-top div。

#2

You can only use z-index on positioned elements (relative, fixed/absolute), so try adding:

您只能在定位元素(相对，固定/绝对)上使用z索引，所以尝试添加:

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

#3

If increasing the z-index of the parent element(as mentioned in other answers) did not work for you, it could be that one of the parent elements has "overflow: hidden;" Try removing it and see if it works.

如果增加父元素的z索引(如其他答案中所提到的)对您不起作用，则可能是父元素的其中一个元素“溢出:隐藏”;试着删除它，看看它是否有效。

#4

Just make overflow as inherit or Visible.

将溢出作为继承或可见。

it will solve the problem.

它将解决这个问题。

overflow: visible !important;

溢出:可见!重要;

It worked for me awesomely

这对我很有帮助。

#5

Check out the "append-to vs. append-to-body vs. inline example" on the newest version of UI-Bootstrap lib.

在最新版本的UI-Bootstrap lib中检查“append-to vs. appbody vs. inline example”。

#6

it's resolved by adding in menu CSS.

它通过添加菜单CSS来解决。

position: relative;
z-index: 10000;

#7

-1

I had the same thing happen when using

我用的时候也有同样的情况。

overflow-x: hidden;

On the parent element. Had to turn it off.

在父元素。必须关掉它。

#1