您将如何解决这个常见的IE Z-index错误的罕见示例？

Question

This may appear to be a common question that has already been answered because it refers to the well-known z-index bug in IE7 and lower. However, this situation is somewhat unique;

I am using a CSS dropdown menu that uses nested lists for sub menus. I have used this many times on other sites, but usually with the first level being horizontal. In this case, the first level needs to be vertical and the sub menus should fly out rather than drop down.

On top of that, the whole thing is complicated because the first level "wraps" to a curve in the design and the menu ul floats to accommodate a different layout on internal pages. The floating causes all kinds of problems with apparent solutions, because if the z-index is higher than the content on the page, the links in that content are covered by top level menu items.

Anyway, with a lot of patience I've gotten it to work perfectly, except in IE7 and lower. The problem I'm having is that IE wants to put the sub-menus underneath the top level menu items (This is the expected behavior for IE, I understand that). But, since the top level items are on a curve, some of the flyout menus end up being overlapped by top level items.

As an, admittedly awful, fix, I used the star hack in my CSS to add padding to the flyout menus. This makes them functional, but doesn't actually address the issue or look appealing.

So, view the site , and let me know if you have any ideas. Thanks!

Answer 1

You will want to take all the li at the top level and set their z-index values incrementally lower as you go down the page. For instance, starting from the top "Property Search", assign z-index values of 99, 98, 97, etc. This should make it so the child items (submenus) of each li will be on a higher z-index stack than the root items following them on the page.