Los menús desplegables de Bootstrap que aparecen detrás de otros elementos: IE7

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

Así que estoy usando su clase ‘menú desplegable’ para crear algunos menús desplegables simples de uso rápido, pero por alguna razón en IE7 aparecen detrás del texto y otros elementos en mi sitio.

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

Agregué z-index a mi CSS, pero todavía no parece hacer nada, ¡por favor ayuda!

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

IE9, Chrome, FF y otros modernos navegadores de cefaleas: enter image description here


IE7> 🙁
enter image description here

HTML

 

¡Es un problema de contexto de astackmiento !

Aunque está usando z-index en el menú desplegable, solo está relacionado con elementos en el mismo contexto de astackmiento. Debe agregar un z-index y una position a un elemento primario para que esto funcione. En este caso, recomendaría el header-top div

Solo puede usar z-index en los elementos posicionados (relativos, fijos / absolutos), intente agregar:

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

Si el aumento del índice z del elemento principal (como se menciona en otras respuestas) no funcionó para usted, podría ser que uno de los elementos principales tenga “desbordamiento: oculto”; Intente eliminarlo y vea si funciona.

Solo desborde como heredado o Visible.

resolverá el problema

overflow: visible !important;

Me funcionó increíblemente

Consulte el ” ejemplo de anexión versus anexión al cuerpo versus en línea ” en la versión más reciente de UI-Bootstrap lib.

se resuelve al agregar en el menú CSS.

 position: relative; z-index: 10000; 

Tuve la misma cosa cuando uso

 overflow-x: hidden; 

En el elemento padre Tuve que apagarlo.