Bootstrap dropdowns menus appearing behind other elements - IE7
CssInternet ExplorerTwitter BootstrapInternet Explorer-7Css Problem Overview
I'm using Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html
So I'm using their 'dropdown-menu' class to create some simple quick use dropdown menus, but for some reason on IE7 they are appearing behind text and other elements on my site.
Test Link: http://leongaban.com/_projects/defakto/CDS/
I added z-index to my CSS, but still doesn't seem to do anything, please help!
.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
z-index: 10000;
}
IE9, Chrome, FF and other modern no headache browsers:
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>
Css Solutions
Solution 1 - Css
Its a stacking context issue!
Even though you are using z-index
on the dropdown, it is only relative to elements in the same stacking context. You need to add a z-index
and a position
to a parent element in order to get this to work. In this case I would recommend the header-top
div
Solution 2 - Css
You can only use z-index
on positioned elements (relative, fixed/absolute), so try adding:
.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
position: relative;
z-index: 10000;
}
Solution 3 - Css
If increasing the z-index of the parent element(as mentioned in other answers) did not work for you, it could be that one of the parent elements has the following property:
overflow: hidden;
Try changing it to:
overflow: visible;
and see if it works.
Solution 4 - Css
Just make overflow as inherit or Visible.
it will solve the problem.
overflow: visible !important;
>It worked for me awesomely
Solution 5 - Css
Check out the "append-to vs. append-to-body vs. inline example" on the newest version of UI-Bootstrap lib.
Solution 6 - Css
I had the same thing happen when using
overflow-x: hidden;
On the parent element. Had to turn it off.
Solution 7 - Css
it's resolved by adding in menu CSS.
position: relative;
z-index: 10000;