CSS, min-width not working in Compatability Mode

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 how it looks in IE8, which is the correct way:

The one css property that doesnt seem to work in compatibility mode is the min-width, which Im assuming compatibility mode is an older version of IE? Or at least I a开发者_C百科m assuming this issue would happen in IE7. Here is the css property for this menu:

#main_menu li ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
    border:no-border;
}

#main_menu li ul li {
    float:none;
    display:inline;
}

#main_menu li ul li a {
    background:#efefef;
    color:#24313C;
    text-align:left;
    text-transform:none;
    font-weight:normal;
    letter-spacing:normal;
    min-width:70px;
}

Any idea how to get the older version if IE to work like how it looks in IE8?

EDIT: Here is the image when adding display:block and width:70px. As you can see it cuts off, trying to have it automatically expand to the longest text in the menu like it would in IE8.

What will probably work best is to detect the widest element using JavaScript, then set the elements to that width - see jsfiddle (http://jsfiddle.net/NneMQ/). I checked in IE7 and it works as far as I understand your requirements.

The jQuery I used was:

    $(function () {
        var target = $('#main_menu li ul li');
        var target_array = [];
        target.each(function (i) {
            target_array[i] = $(this).width();
        });
        // get widest element and add 10px of padding on the right
        var max_width = Math.max.apply(null, target_array)+10; 
        target.find('a').css( { 'width': max_width + 'px', 'display': 'block' } );

    });

EDIT:

Good catch. I updated the code to work with multiple lists. It works in IE7 and in IE8 compatibility mode (which is designed to emulate IE7 anyway):

See http://jsfiddle.net/g_thom/NneMQ/1/

Updated jQuery:

    var target = $('#main_menu > li');
    var target_array = [];
    target.each(function (i) {
        $(this).find('li').each(function (j) {
            target_array[j] = $(this).width();
        });
        // get widest element and add right padding of 10 px
        var max_width = Math.max.apply(null, target_array)+10;
        target.eq(i).find('a').css( { 'width': max_width + 'px', 'display': 'block' } );
    });

Use width instead of min-width and add display: block; to the style:

#main_menu li ul li a {
    display: block;
    background:#efefef;
    color:#24313C;
    text-align:left;
    text-transform:none;
    font-weight:normal;
    letter-spacing:normal;
    width:70px;
}

This is untested, but try doing something similar to this:

#main_menu li ul li a {
    display: block;
    background:#efefef;
    color:#24313C;
    text-align:left;
    text-transform:none;
    font-weight:normal;
    letter-spacing:normal;
    min-width:70px;
    width:auto !important;
    width: 70px;
}

I think that will make IE work :D