I'm working on dropdowns in IE6 (SELECT with OPTIONs as children). I'm experiencing the problem where, in IE6, dropdown menus are truncated to the width of the SELECT element. I used this jquery to fix it:

var css_expanded = {
'width' : 'auto',
'position' : 'absolute', 
'left' : '564px', 
'top' : '393px' 
}
var css_off = {
'width' : '190px',
'position' : 'relative', 
'left' : '0', 
'top' : '0' 
}

if($.browser.msie) { 
    $('#dropdown')

    .bind('mouseover', function() { 
        $(this).css(css_expanded); 
    })

    .bind('click', function() { 
        $(this).toggleClass('clicked'); 
    })    

    .bind('mouseout', function() { 
        if (!$(this).hasClass('clicked')) { 
            $(this).css(css_off); 
        }
    })
    .bind('change blur focusout', function() { 
        $(this).removeClass('clicked')
        .css(css_off)
    });
};

It works fine in IE7+8, but in IE6, if the user clicks on a SELECT and does not click any OPTION but instead clicks somewhere else on the page, outside the SELECT (blur), the SELECT still has a "highlight", the same as if they were hovering over an OPTION with my mouse (in my case, a blue color), and the width is not restored until the user clicks outside the SELECT a second time. In other browsers, blur causes every OPTION to not be highlighted.

Using JS, how can I de-highlight an option after the dropdown has lost focus.