Bootstrap dropdowns menus appearing behind other elements - IE7
Solution 1:
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:
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;
}