Bootstrap dropdowns menus appearing behind other elements - IE7

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

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.

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