Just as an FYI, it’s considered poor programming practice to indiscriminately use the !important clause. Many people use it because they can’t figure out how to make the selector more specific.
In your example, you started off correctly, you copied the existing rule and changed the color value:
#mainnav ul li a:hover {
color: white;
}
One of the reasons why it might not override the existing rule is that your custom CSS comes in before the rule that’s in effect. That is, most custom CSS plugins will put their stylesheets after the theme’s style.css file, which is fine in most cases. The way that CSS works is that if there are two rules with identical specificity, then the rule which comes last takes precedence.
However, there are some themes which add a separate inline stylesheet in addition to the style.css file, and if the rule that you are trying to override is in there, and the plugin’s CSS comes before that inline stylesheet, the rule in the inline stylesheet will take precedence. To override the rule, then, you need to make the selector of your new rule more specific.
So, to get back to your problem, the best practice says that you should just add enough specificity to your new rule to override the exiting rule. Adding the !important clause is overkill, it really only needs to be used to override inline styles, or if the property you are trying to override has the !important clause already in it. You can try modifying your rule like this:
nav#mainnav ul li a:hover {
color: white;
}
That is, add the nav element name to #mainnav ID (note that there is no space between them since they are the same element), and that will add 1 point to the specificity. That should be enough to override the existing rule.
