css - ширину - выпадающее меню bootstrap 4




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

Вы можете использовать только 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;
}

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

Поэтому я использую свой класс «dropdown-menu», чтобы создать несколько простых меню выпадающего меню быстрого доступа, но по какой-то причине в 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 и другие современные браузеры с головной болью:

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>

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


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

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

overflow: visible !important;

Это сработало для меня ужасно


У меня было то же самое, что и при использовании

overflow-x: hidden;

О родительском элементе. Пришлось отключить его.


Его проблема стекирования !

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





internet-explorer-7