Bootstrap dropdowns menus appearing behind other elements - IE7

Question

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,

Answer 1

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 "overflow: hidden;" Try removing it and see if it works.

Answer 2

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

Answer 3

Check out the "append-to vs. append-to-body vs. inline example" on the newest version of UI-Bootstrap lib.

Answer 4

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

Answer 5

it's resolved by adding in menu CSS.

position: relative;
z-index: 10000;

Answer 6

Just make overflow as inherit or Visible.

it will solve the problem.

overflow: visible !important;

It worked for me awesomely