CSS/HTML text onhover doesn't change - html

Question

I want to style the colors of a menu bar.
If the li is "active" then the text color and the border color should be blue, otherwise everything is gray.
On hover, the grey colors should turn blue.
I tried but it doesn't work. This is my code:
#import 'https://fonts.googleapis.com/css?family=Fjalla+One';
ul.dnav {
list-style-type: none;
margin-left: 0px;
margin-right: 0px;
overflow: hidden;
width: 400px;
-webkit-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
-moz-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
}
li.dnav {
font-size: 20px;
background-color: #FFF;
width: 100px;
float: left;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 0px;
border-style: solid;
border-color: grey;
border-bottom-width: 5px;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
}
li.dnav a {
color: grey;
font-family: 'Fjalla One', sans-serif;
display: block;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li.dnav a:hover {
background-color: #fff;
opacity: 1;
overflow: hidden;
color: rgba(0, 130, 255, 1);
border-color: rgba(0, 130, 255, 1);
}
a:active {
background-color: #fff;
opacity: 1;
overflow: hidden;
color: rgba(0, 130, 255, 1);
}
li.dnav-active {
border-color: rgba(0, 130, 255, 1);
border-bottom-width: 5px;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
color: rgba(0, 130, 255, 1);
}
<header>
<ul class="dnav">
<li class="dnav dnav-active"><a class="active" href="#">Home</a>
</li>
<li class="dnav">ser
</li>
<li class="dnav">con
</li>
</ul>
</header>

Answer 1

The problem is you are targeting the 'a' element in the hover selector.
The border is placed on the 'li' element instead.
So when you are hovering over the elemennt, only the border of the 'a' element is changing.
You could rewrite you're css to target the LI when hovering (as i did in the snippet), but i can recommend to fully style the 'a' element instead of the 'li'.
In the code snippet below the hover works with a small change to the 'hover' selector.
#import 'https://fonts.googleapis.com/css?family=Fjalla+One';
ul.dnav {
list-style-type: none;
margin-left: 0px;
margin-right: 0px;
overflow: hidden;
width: 400px;
-webkit-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
-moz-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
}
li.dnav {
font-size: 20px;
background-color: #FFF;
width: 100px;
float: left;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 0px;
border-style: solid;
border-color: grey;
border-bottom-width: 5px;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
}
li.dnav a {
color: grey;
font-family: 'Fjalla One', sans-serif;
display: block;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li.dnav:hover {
background-color: #fff;
opacity: 1;
overflow: hidden;
color: rgba(0, 130, 255, 1);
border-color: rgba(0, 130, 255, 1);
}
a:active {
background-color: #fff;
opacity: 1;
overflow: hidden;
color: rgba(0, 130, 255, 1);
}
li.dnav-active {
border-color: rgba(0, 130, 255, 1);
border-bottom-width: 5px;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
color: rgba(0, 130, 255, 1);
}
<header>
<ul class="dnav">
<li class="dnav dnav-active"><a class="active" href="#">Home</a>
</li>
<li class="dnav">ser
</li>
<li class="dnav">con
</li>
</ul>
</header>

Answer 2

You set up your hover rule only for the included a tag. I added a separate rule for the li element being hovered in the snippet below:
li.dnav:hover {
border-color: rgba(0, 130, 255, 1);
}
#import 'https://fonts.googleapis.com/css?family=Fjalla+One';
ul.dnav {
list-style-type: none;
margin-left: 0px;
margin-right: 0px;
overflow: hidden;
width: 400px;
-webkit-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
-moz-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
}
li.dnav {
font-size: 20px;
background-color: #FFF;
width: 100px;
float: left;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 0px;
border-style: solid;
border-color: grey;
border-bottom-width: 5px;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
}
li.dnav a {
color: grey;
font-family: 'Fjalla One', sans-serif;
display: block;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li.dnav a:hover {
background-color: #fff;
opacity: 1;
overflow: hidden;
color: rgba(0, 130, 255, 1);
border-color: rgba(0, 130, 255, 1);
}
li.dnav:hover {
border-color: rgba(0, 130, 255, 1);
}
a:active {
background-color: #fff;
opacity: 1;
overflow: hidden;
color: rgba(0, 130, 255, 1);
}
li.dnav-active {
border-color: rgba(0, 130, 255, 1);
border-bottom-width: 5px;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
color: rgba(0, 130, 255, 1);
}
<header>
<ul class="dnav">
<li class="dnav dnav-active"><a class="active" href="#">Home</a>
</li>
<li class="dnav">ser
</li>
<li class="dnav">con
</li>
</ul>
</header>