Html drop down with different size for list of entries and the selected entry

I am facing some problem with html drop down. I want to keep the size of the drop down fixed, but when the user click on the drop down, the list should displayed in bigger size so that the entries are not truncated.This is the default behaviour in fiefox, this issue appears only in IE. Can any one suggest some work around for solving this issue in IE?

I have tried expanding the siz开发者_JAVA百科e of the drop down in the onclick event. But it will increase the entire drop down.(not only the list).

style='width:100px;' onclick="this.style.width = '200px';" onblur ="this.style.width = '100px'

Out of pure curiosity I have tried to work something out. It's not perfect.

Using em instead of px, there are issues with em, but its much more reliable than px in this case. How Big is an Em?

HTML:

<select id="sel" name="sel" style="width:100px;">
    <option>Options</option>
    <option>IIIIIIIIIIIIIII</option>
    <option>MMMMMMMMMMMMMMMMMMMMMMMMM</option>
    <option>OptionsOptionsOptionsOptionsOptionsOptions</option>
    <option>Options</option>
</select>

JQuery:

$('#sel').change(function () {
   var len = $('#sel option:selected').val().length;
   $('#sel').attr("style", "width:"+len+"em;");
});

The quick JsFiddle

Like you will see its not perfect, I's are much smaller than M's, but px are even more font dependent. At least em's have some consistency. May be it helps!