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

menus desplegables

Question

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:

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

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.

Answer 2

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.

Answer 3

Solo desborde como heredado o Visible.

resolverá el problema

overflow: visible !important;

Me funcionó increíblemente

Answer 4

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;
}

Answer 5

Tuve la misma cosa cuando uso

overflow-x: hidden;

En el elemento padre Tuve que apagarlo.

Answer 6

se resuelve al agregar en el menú CSS.

position: relative;
z-index: 10000;

Answer 7

¡Es un problema de contexto de apilamiento !

Aunque está usando z-index en el menú desplegable, solo está relacionado con elementos en el mismo contexto de apilamiento. 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