:onhover pseudo-class not working as expected

Question

I have a piece of code I've written, which I have placed above a section of minified CSS:

.scroll-fixed-navbar {
  background-color: black !important;
}

.banner-list li i {
  color: #f86900 !important;
}

.btn-primary {
  background-color: #f86900 !important;
}

#nav li a {
  color: #f1861d !important;
}

#nav li:hover {
  color: #a8a89b !important;
}

[Huge chuck of minified code containing Font Awesome and Twitter Bootstrap]    

On one server this works as expected, and the link items fade to grey on hover. On another server, however, the on hover effect does not trigger. I've tried opening the li elements in the inspector, but even on the server where the effect is working, the CSS doesn't appear to show up:

I saw somewhere that the :hover pseudo-class should only be applied to the a element, but I looked at the W3C wiki, and there is no mention of this there. Can I apply :hover to the li parent of an anchor in this way, or is it illegal code? Might the Bootstrap and/or Font Awesome code be overriding the CSS? Or is the problem likely to be caused by something else?

Answer 1

I think this:

#nav li a {
  color: #f1861d !important;
}

is overriding this:

#nav li:hover {
  color: #a8a89b !important;
}

Why do you set the :hover on the li? Try targeting the a element after the li:hover:

 #nav li:hover a {
  color: inherit !important;
}