Min-width issue in IE7?

I am using a drop down menu for a website and in IE8 it works just fine, but when I go into compatability mode the drop down menu looks wrong. The background color is only as wide as the text in each list element. Here is a image of the issue.

Here is the correct way, in IE8:

Here is the css style:

#main_menu li ul {

#main_menu li ul li {

#main_menu li ul li a {

Any idea to get this to work in older versions of IE?

Might be better to give a specific width for those LIs and/or <a>s, at least for IE7. Otherwise, choose a width fro the drop lists (placed on the UL, and set the widths of the LIs to 100%. To make the <a> fill each LI, place the required padding on them and set them to display: block.

The problem is the width is dynamic based on how long the text is. I would hate to have a huge empty space to the right if I had to guess what the longest text would be.

IE 7 is buggy when it comes to using min and max width, you can read about it here min-width (CSS property)

Fair enough. Well then, try putting the background color on the LIs instead of the <a>s, or set the <a>s to display: block to make the background color fill the whole LI.

Yeah I was able to do that, but dont I go back to square one because of the hover color is only as far as the width of the link? So if I set the background color of the UL to the gray, then it looks correct, but when I mouse over each link the hover width is as long as the width specified in the css.

OK, so the color has to be on the <a>s. In that case, set them to display: block. That will make the <a>s fill the whole LI.

In Ie7 and below the trick is to set display:block to the anchor but ensure that “haslayout” isn’t set (no dimensions or floats) and then also add position:relative to the anchor.

Here’s a very very old demo showing a fluid width dropdown based on the width of the text that you can copy from.