Подтвердить что ты не робот

Выпадающие меню Bootstrap появляются за другими элементами - IE7

Я использую Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html

Итак, я использую свой класс "выпадающего меню", чтобы создать несколько простых меню выпадающего меню быстрого доступа, но по какой-то причине IE7 они появляются за текстом и другими элементами моего сайта.

Тестовая ссылка: http://leongaban.com/_projects/defakto/CDS/

Я добавил z-index к моему CSS, но все равно ничего не делает, пожалуйста, помогите!

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

IE9, Chrome, FF и другие современные браузеры с головной болью: 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="#" onclick="location.href='http://google.com'; return false;">Logout</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Account</a></li>
        </ul>
    </li>
</ul>
4b9b3361

ОТВЕТЫ

Ответ 1

Его проблема stacking context

Даже если вы используете z-index в раскрывающемся списке, это относится только к элементам в одном контексте стекирования. Вам нужно добавить z-index и a position к родительскому элементу, чтобы заставить это работать. В этом случае я бы рекомендовал header-top div

Ответ 2

Вы можете использовать z-index для позиционированных элементов (относительный, фиксированный/абсолютный), поэтому попробуйте добавить:

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

Ответ 4

Если увеличение z-индекса родительского элемента (как упоминалось в других ответах) не сработало для вас, возможно, что один из родительских элементов имеет "overflow: hidden;" Попробуйте удалить его и посмотреть, работает ли он.

Ответ 5

Просто сделайте переполнение как наследуемое или видимое.

он решит проблему.

overflow: visible !important;

Это сработало для меня удивительно