How can I override Twitter Bootstrap dropdown hover in IE

Question

This works in Chrome, Safari, and Firefox. But not in IE9. I want to remove the blue background from the dropdown-menu hover.

I have a twitter bootstrap dropdown-menu.

<ul class="dropdown-menu">
  <li>
    <a href="/users/sign_out">Sign out</a>
  </li>
</ul>

In my overrides.css (loaded after bootstrap.min.css)

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  color: red;
  background-color: white;
  background-image: none;
}

However, in IE the background-color and background-image is not working, it's still the twitter bootstrap blue. The color works fine, it is red when I hover.

Any help is greatly appreciated!

Here is a jsfiddle with my example: http://jsfiddle.net/tcpxq/

Answer 1

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  color: red;
  background-color: white;
  background-image: none;
  filter: none;
}