I just ran into this issue where on a website I created, the menu items had this ugly blue background, only in Internet Explorer! The solution is simple, though it took me a while to find out it was Twitter Bootstrap, and not IE that was adding the blue background (I posted this answer on StackOverflow as well) :

.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus, 
.dropdown-submenu:hover > a, 
.dropdown-submenu:focus > a,
.dropdown-menu > li.active > a
   filter: none;

Notice that this is a direct override of twitter bootstrap’s CSS. Apparently, Internet Explorer needs the ‘filter’ to be removed. Notice that it also overrides the ‘active’ list element.

That’s it!

Leave a Reply

Your email address will not be published. Required fields are marked *