Hover problems nav bar (HTML/CSS) - html

Question

I've made a nav bar and I'd like to use the hover selector only on the pages that aren't active. So I used the selector a:not(.active):hover but it doesn't work. I'd really appreciate if someone could help me.
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display:block;
position:absolute;
top:-2px;
left:0;
right: 0;
background-color: darkred;
}
li
{
float: left;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 20px 23px;
text-decoration: none;
}
li a:not(.active):hover
{
background-color: #B22222;
}
.active {
background-color: #470005;
}
<ul>
<li class="active">Home</li>
<li>About me</li>
<li>Contacts</li>
<li>Help</li>
<li>Other Works</li>
<li>News</li>
</ul>

Answer 1

Your :not pseudo-class is on your link. However, the active class is on the li.
li:not(.active) a:hover should work
JSfiddle Example: https://jsfiddle.net/ubntkk46/

Answer 2

The class is linked to your li element, not the hyperlink
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: block;
position: absolute;
top: -2px;
left: 0;
right: 0;
background-color: darkred;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 23px;
text-decoration: none;
}
li:not(.active) a:hover {
background-color: #B22222;
}
.active {
background-color: #470005;
}
<ul>
<li class="active">Home</li>
<li>About me</li>
<li>Contacts</li>
<li>Help</li>
<li>Other Works</li>
<li>News</li>
</ul>

Answer 3

You could just apply the same background colour to the active a tag and the active a tags hover state, and a different background colour to the the non active a tags hover states. This would allow it to work in IE8, because :not isn't supported in older versions of IE.
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display:block;
position:absolute;
top:-2px;
left:0;
right: 0;
background-color: darkred;
}
li
{
float: left;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 20px 23px;
text-decoration: none;
}
li a:hover {
background-color: #B22222;
}
li.active a, li.active a:hover {
background-color: #470005;
}
<ul>
<li class="active">Home</li>
<li>About me</li>
<li>Contacts</li>
<li>Help</li>
<li>Other Works</li>
<li>News</li>
</ul>

Answer 4

This Fix It :
li:not(.active):hover a {
}
Full Code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display:block;
position:absolute;
top:-2px;
left:0;
right: 0;
background-color: darkred;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 23px;
text-decoration: none;
}
li:not(.active):hover a {
background-color: #B22222;
}
.active {
background-color: #470005;
}
<ul>
<li class="active">Home</li>
<li>About me</li>
<li>Contacts</li>
<li>Help</li>
<li>Other Works</li>
<li>News</li>
</ul>