IE z-index relative/absolute bug in list

Question

I have the following navigation where .topNav has position:relative and subnav has position:absolute. I cant get the sublist to appear over the main list due to z-index prob

Answer 1

I had the same issue and was able to fix it In IE6 and 7. Combining http://code.google.com/p/ie7-js/ with the following CSS the issue went away. With my issue I had some items inside a list floated left and had a tooltip that popped up whenever the user hovered over the li. To fix it, I adde this:

.ul li:hover {position:relative;z-index:4;} .ul li:hover + li {position:relative;z-index:3;}

The way it works is whenever the user hovers over the first LI for example, it sets the second LI floated next to it to a lower z-index value. You can of course change the z-index values to fit your own needs.