title: IE 10, when adding a css:hover to a select tag, the select tag doesn't work
body: <p>I have a select html tag in my page, it has a class attached to it :</p>
  
  <pre><code>&lt;select id="sel_NavigateBy" class="selectDropDown" name="sel_NavigateBy"&gt;
  </code></pre>
  
  <p>The problem is, if I use this additional css hover on the class; </p>
  
  <pre><code>    .selectDropDown:hover
  {
      background-color:#EBF2FA !important;   
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Here's the normal css class for .selectDropDown (if it's any help, and I do realize using too many !important tags are bad)</p>
  
  <pre><code>.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;
  }
  </code></pre>