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.
