CSS hover and active selection for UL - css

Question

Hi I have different colors for hover and active menu items. The problem is that when an item is active it changes color when hovered. I want it to maintain its active color. I mean I don't want the hover color to apply to an active menu item.
CSS:
li a:hover{
color: black;
text-shadow: 0px 1px 0px black;
}
li.active a{
color: #f37121;
font-weight: bold;
font-size: 17px;
}

Answer 1

You can add inheritance to active link.
Just adding:
li.active a:hover{ color: inherit;}

Answer 2

You could apply a :not() (CCS3 selectors are pretty well supported nowerdays) to specify you only want the changes to happen on anchor tags that do not have the .active class
li:not(.active) a:hover {
color: black;
text-shadow: 0px 1px 0px black;
}
http://jsfiddle.net/srqnuyp7/3/
Or you could simply add text-shadow:none; as an additional rule
li.active a {
text-shadow:none;
}
http://jsfiddle.net/srqnuyp7/2/

Answer 3

You can simply use :not(selector). This matches every element that isn't selector.
You just need to add this into your first rule for li.
li:not(.active) a:hover{ color: black; text-shadow: 0px 1px 0px black;}
Run the snippet below:
li:not(.active) a:hover{ color: black; text-shadow: 0px 1px 0px black;}
li.active a { color: #f37121; font-weight: bold; font-size: 17px;}
<li>inactive link 1</li>
<li class="active">active link</li>
<li>inactive link 2</li>