Odd CSS behavior in IE7 unordered list

Question

I have a drop down list that I'm trying to get working in IE7. Amongst other bugs, the one that has me beat is the anchors on hover not pushing the background to full padding height. It seems to stay within the dimensions of its li and ultimately the ul. I've tried expanding the height of both ul and li but this doesn't seem to work. Works correctly in all other browsers:

http://jsfiddle.net/gzLVR/2/

What you should see: The anchor tag, on hover, should expand at the bottom by 50px (as per the css #menu > ul > li:hover > a { padding-bottom:50px; } . This expansion is performed, but the background-color doesn't seem to push to the anchor's margins.

What am I doing wrong?

Answer 1

IE7 does not support :hover on items other than <a> tags. Since you have your :hover on an <li> it is not working in IE7.

You'll need to add some javascript to add a .hover class to the <li> when you mouseover, and then adjust your css to include it as well:

#menu > ul > li:hover > a,
#menu > ul > li.hover > a{ 
    padding-bottom:50px; 
}

[EDIT] It appears this is only true when IE7 renders in quirksmode. If you are using a strict doctype, you should be able to use :hover on an <li>

Answer 2

Have you tried changing the anchor to

display:inline-block; 
zoom:1;

The zoom should only be required for IE7, it triggers ' hasLayout '

Answer 3

I think trigger hasLayout will fix it; you can do it with somthin like this:

#menu > ul > li > a { display: inline-block;}

Be aware of that IE don't supports :last-child up to IE8 , but you can use :first-child .

I would also suggest to use a pseudo element for the part you used the <i></i> , so you don't have unneccessary markup in your HTML.

Answer 4

I ended up finding the solution myself. Each li's anchors are by default set to wrap around it's content (display:inline?), and setting the display to inline-block is somewhat dangerous as its behavior in IE7 is somewhat unpredictable.

By simply setting the anchor to display:block, you allow it to take on dimensions of itself in IE7, so you break it away from having it simply wrap around its content. Thus, it's possible for it to affect the needed padding when on hover.

This will now work in IE7: http://jsfiddle.net/gzLVR/5/