CSS-based hover menu getting hidden in IE7 [closed]

开发者_C百科 This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 10 years ago.

On this site: http://chezkoop.ca/united the drop down menus are hidden behind the slider (on the homepage) and the page titles (on the other pages) in IE7 (haven't checked IE6 and I'm not supporting it).

I feel like I have tried every possible combination of z:index: X and position: relative as various posts around the internet have suggested. Nothing has worked and I am going crazy!

Any help would be hugely appreciated.

Adrian

---

I assume you've read the various posts explaining this IE7 bug, so I'm not going to link to them.

Here's a way to fix it:

• On #slider-slides, remove position: relative.
• On #menu-menu, add z-index: 3000.
• On #nav, add z-index: 4000.

Here's a live page with a version of the tweaks above that works in IE7: http://jsbin.com/ixefa3

You don't need to use such large z-index values. I just picked convenient and high numbers.

---

After playing around with it for a bit in IE Dev Tools, i realized your problem - make sure you've got the z-index set on ALL the elements - the picture and all its parent containers, the menu and all ITS parent containers until the two meet. hope that helps...if not i can try to clarify.