webentwicklung-frage-antwort-db.com.de

Bootstrap-Dropdown-Menüs, die hinter anderen Elementen erscheinen - IE7

Ich verwende Bootstrap 2.3.1 http://Twitter.github.io/bootstrap/index.html

Ich verwende ihre Klasse 'Dropdown-Menü', um einfache Dropdown-Menüs für die schnelle Verwendung zu erstellen, aber aus irgendeinem Grund erscheinen sie auf IE7 hinter Text und anderen Elementen auf meiner Website.

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

Ich habe z-index zu meinem CSS hinzugefügt, scheint aber immer noch nichts zu tun, bitte helfen Sie!

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

IE9, Chrome, FF und andere moderne Browser ohne Kopfschmerzen: enter image description here

IE7> :(
enter image description here

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>
cssinternet-explorertwitter-bootstrapinternet-explorer-7
48
Leon Gaban

Es ist ein Stacking-Kontext Ausgabe!

Obwohl Sie z-index in der Dropdown-Liste verwenden, ist dies nur relativ zu Elementen im selben Stapelkontext. Sie müssen einem übergeordneten Element einen z-index und eine position hinzufügen, damit dies funktioniert. In diesem Fall würde ich den header-topdiv empfehlen.

77
Blake Plumb

Sie können z-index nur für positionierte Elemente (relativ, fest/absolut) verwenden.

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

Wenn das Erhöhen des Z-Index des übergeordneten Elements (wie in anderen Antworten erwähnt) für Sie nicht funktioniert hat, könnte es sein, dass eines der übergeordneten Elemente "overflow: hidden;" Entfernen Sie es und prüfen Sie, ob es funktioniert.

8
el3ati2

Machen Sie einfach einen Überlauf als erben oder sichtbar. 

es wird das problem lösen.

overflow: visible !important;

Es hat für mich großartig funktioniert 

4
Ronak Bokaria

Schauen Sie sich das Beispiel " anfügen an vs. anfügen an Körper vs. Inline " in der neuesten Version der UI-Bootstrap-Bibliothek an. 

2
tiago

es wird durch Hinzufügen von CSS im Menü aufgelöst.

position: relative;
z-index: 10000;
0
ganesh pandey