CSS Hover doesn't work in IE8

Question

I have an DNN web site which use's the following code for the menu dropdown.

IE8 doesn't like it and the sub menu won't pull down.

.nav-collapse:not(.in) .nav li:hover > ul {
    display: block;
}

You can duplicate this by going to http://dnnsample.azurewebsites.net in IE8. The About Us has a submenu. If you have IE11 you can press F12 > press ctrl+8 and change document mode to 8.

Anyone know an alternate method of making this work in IE8?

Answer 1

You could use two CSS rules. The second one should override the first but only for elements with the .in class. It should have the same effect as your selector using :not().

.nav-collapse .nav li:hover > ul {
    display: block;
}

.nav-collapse.in .nav li:hover > ul {
    display: none; // or whatever display value you have as default
}

The reason your CSS isn't working is because :not()is only supported by IE9+. See this MDN article for reference

Answer 2

The :not CSS3 selector isn't supported in IE8.

Try to select your element with using :not and your hover will work just fine.

http://caniuse.com/css-sel3