Bootstrap 2.3.1を使用しています http://Twitter.github.io/bootstrap/index.html
だから私は彼らの「ドロップダウンメニュー」クラスを使用していくつかの簡単なクイックドロップダウンメニューを作成していますが、何らかの理由でIE7それらはテキストの後ろに表示されますそして私のサイトの他の要素。
テストリンク:http://leongaban.com/_projects/defakto/CDS/
私はCSSにz-indexを追加しましたが、それでも何もしないようです。助けてください!
.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>
それは スタッキングコンテキスト issue!
ドロップダウンでz-index
を使用している場合でも、同じスタックコンテキストの要素にのみ関連します。これを機能させるには、z-index
とposition
を親要素に追加する必要があります。この場合、header-top
div
をお勧めします
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;
}
(他の回答で述べたように)親要素のz-indexを増やしてもうまくいかない場合は、親要素の1つに"overflow:hidden;"を削除してみてください。動作するか確認してください。
オーバーフローを継承または可視として作成します。
問題を解決します。
overflow: visible !important;
私にとってはすばらしかった
最新バージョンのUI-Bootstrap libで「 append-to vs. append-to-body vs. inline example 」を確認してください。
メニューCSSを追加することで解決します。
position: relative;
z-index: 10000;