问题
I have a colorful menu ("Destaques", "Roupas", "Sapatos" and "Fale Conosco") who is working, but IE7 is behind the gallery is on the page, as I tried to solve using z-index, but nothing seems to work, does anyone have any tips?
page link
Hovering the mouse over the menu using IE7 realize what I'm talking about.
回答1:
There's a lot going on here, but I'll try to take a crack at it.
First, try to work on getting your HTML to validate. There's a lot of invalid HTML that could be leading to issues.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.montepage.com.br%2Finfantile%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Second, I believe IE7 does something funny with z-index. It sort of resets it's z-index based on it's parent. I know I've ran into this issue in the past. Basically, if two parent elements like this:
<div id="parent1">...</div>
<div id="parent2">...</div>
If "parent1" has a lower z-index than "parent2", all children of "parent1" will be lower than "parent2", regardless of their z-index value. What you can try to do is make sure "parent1" has a higher z-index.
From looking at your code, it seems like the parent elements are:
<div class="colorido"> <!-- the menu container -->
...
<div id="corpo"> <!-- the image promotional container that rotates -->
...
See if setting "colorido" to a higher z-index than "corpo" works. You might have to set them to "position:relative" so that it works.
It's hard for me to read that HTML and CSS, there's a lot going on here. So, I might have the wrong containers, but hopefully the idea can help you.
This page might help lead to some answers as well as some other tricks to try: http://aplus.rs/css/ie7-bug-will-not-render-z-index-change-on-lihover/
Hope that helps!
来源：https://stackoverflow.com/questions/9368529/expanding-the-menu-appearing-underneath-the-gallery-in-ie7