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