IE7 Dropdown Menu Make li Fill Remaining Space

I have created a dropdown menu using CSS and JavaScript and I'm having an issue making the sub-menus appear correctly on IE7. When you hover on an anchor tag the background changes to blue. The problem is that in IE7 the background only changes for the length of the text rather than filling the width of the ul. So, if you have one item that has a long name, the rest display incorrectly as shown by the picture below.

You can see the problem on jsfiddle here. Just make sure you open it in IE7 or use IE9 in compatibility mode.

I have tried a bunch of things like setting the width to 100% and the display to block but haven't been able to get it to work. Has anyone sol开发者_如何学Goved this problem?

Thanks

Well, let's see what do you have:

<li><a href="#">Content</a></li>

so you can see that the problem is that the hover is being applied to the <a> and because it's not wide enough it does not work correctly.

Why don't you hover the <li> instead then?

changing from

#mainmenu li a:hover { background: #008de2; }

to

#mainmenu li:hover { background: #008de2; }

P.S. I'm using IE9, so I can't test it properly :-/

Try setting display:block on those anchor tags.

You may find your solution here (jsfiddle).

I made a few changes to #mainmenu li ul li, as well as adding #mainmenu li ul li:hover { background: #008de2;}. Seems fine on my IE7, IE9 (don't have IE8 to test), Safari, Firefox, Opera, and Chrome :)