Bootstrap gli elenchi a discesa menu che appaiono dietro altri elementi - IE7

Question

sto usando Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html

Così sto usando il loro 'discesa menu' di classe per creare alcuni menu a discesa uso rapido semplice, ma per qualche motivo su IE7 vengono visualizzati dietro il testo e altri elementi sul mio sito.

test di collegamento:http://leongaban.com/_projects/defakto/CDS/

ho aggiunto z-index al mio CSS, ma ancora non sembra di fare nulla, per favore aiutatemi!

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

IE9, Chrome, FF e altri moderni non browser mal di testa:

---

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

È un problema stacking context!

Anche se si utilizza z-index nel menu a discesa, è relativo solo agli elementi nello stesso contesto di impilamento. È necessario aggiungere un z-index e un position a un elemento padre per farlo funzionare. In questo caso, consiglierei il header-topdiv

Answer 2

si può solo noi e z-index su elementi posizionati (relative, fisso/assoluta), in modo da provare aggiungendo:

.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

Controlla "append-to vs. append-to-body vs. inline example" sulla versione più recente di UI-Bootstrap lib.

Answer 4

Se l'aumento dello z-index dell'elemento padre (come menzionato in altre risposte) non ha funzionato per te, potrebbe essere che uno degli elementi padre abbia "overflow: hidden;" Provare a rimuoverlo e vedere se funziona.

Answer 5

Basta eseguire l'overflow come ereditario o visibile.

risolverà il problema.

overflow: visible !important;

ha funzionato per me incredibilmente

Answer 6

ho avuto la stessa cosa avviene quando si utilizza

overflow-x: hidden; 

Sulla elemento genitore. Ho dovuto spegnerlo.