expanding the menu appearing underneath the gallery in IE7

Question

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.

Answer 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!