IE 10, when adding a css:hover to a select tag, the select tag doesn't work

Question

I have a select html tag in my page, it has a class attached to it :

<select id="sel_NavigateBy" class="selectDropDown" name="sel_NavigateBy">

The problem is, if I use this additional css hover on the class;

    .selectDropDown:hover
{
    background-color:#EBF2FA !important;   
}

It totally breaks IE 10's select drop down. I can't select anything. The dropdown refuses to show when I click on it (unless I hold down my mouse). Even holding down the mouse to 'force' it to show, I can't select anything on the dropdown list. Switching to IE 9 mode from the developer menu also doesn't fix it. I'm thinking it's rendering select tag differently in IE 10.

Removing the hover class above makes IE 10 back to normal. I'm using Win7 with IE 10 (pre-release) (10.0.9200.16439) as of today.

Here's the normal css class for .selectDropDown (if it's any help, and I do realize using too many !important tags are bad)

.selectDropDown
{
    margin-top:5px !important;
    padding:0px 0px 0px 0px !important;   
    display:inline;
    vertical-align:top !important;
    font-size: 9pt;
    height:25px !important;
    z-index:1;
}

Answer 1

I've solved the problem by having the dropdown inside a div and using jquery to change the colour of the div when the user hovers over the dropdown. Seems to work fine and achieve it's purpose of having a 'hover' effect for all browser with the makeshift solution that I just mentioned.