web-dev-qa-db-fra.com

Menus déroulants Bootstrap apparaissant derrière d'autres éléments - IE7

J'utilise Bootstrap 2.3.1 http://Twitter.github.io/bootstrap/index.html

J'utilise donc leur classe 'menu déroulant' pour créer quelques menus déroulants simples d'utilisation rapide, mais pour une raison quelconque, sur IE7, ils apparaissent derrière le texte et d'autres éléments de mon site.

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

J'ai ajouté z-index à mon CSS, mais ne semble toujours pas faire quoi que ce soit, s'il vous plaît, aidez-moi!

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

IE9, Chrome, FF et autres navigateurs modernes sans maux de tête: 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

C'est un contexte d'empilement issue!

Même si vous utilisez z-index dans la liste déroulante, il est uniquement relatif aux éléments dans le même contexte d'empilement. Pour que cela fonctionne, vous devez ajouter un z-index et une position à un élément parent. Dans ce cas, je recommanderais le header-topdiv

77
Blake Plumb

Vous pouvez uniquement utiliser z-index sur des éléments positionnés (relatifs, fixes/absolus), essayez donc d'ajouter:

.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

Si l'augmentation de l'index z de l'élément parent (comme indiqué dans d'autres réponses) n'a pas fonctionné pour vous, il est possible que l'un des éléments parents ait "overflow: hidden;" Essayez de le retirer et voyez si cela fonctionne.

8
el3ati2

Il suffit de rendre le débordement hérité ou visible. 

ça va résoudre le problème.

overflow: visible !important;

Cela a fonctionné pour moi à merveille 

4
Ronak Bokaria

Consultez l'exemple " append-to vs. append-to-body vs. inline " sur la dernière version de UI-Bootstrap lib. 

2
tiago

c'est résolu en ajoutant dans le menu CSS.

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