The menu highlight does not work when you are on the page?

Question

css

When hovering over menu categories, they are highlighted. but the page on which you are now is not highlighted in blue. Where is my fiel?

.nav {
display: block;
float: left;
height: 20px;
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
}

.nav li {
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 5px;
list-style: none;
text-transform: uppercase;
font-size: 12px;
}

.nav li:first-child {
padding-left: 0;
}

.nav a {
position: relative;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
height: 20px;
color: #777777;
text-decoration: none;
line-height: 20px;
}

.nav a:before {
position: absolute;
top: -9px;
right: 0;
left: 0;
height: 0;
background-color: #488bfa;
content: '';
-webkit-transition: height .15s ease-out;
transition: height .15s ease-out;
}

.nav a:hover:before,
.nav a.uMenuItemA:before {
height: 4px;
}

.nav a:hover,
nav a.uMenuItemA
{color: #fff}

.nav .newitem:after {
 content: '';
 position: absolute;
 top: 15px;
 right: 3px;
 width: 5px;
 height: 5px;
 background: #448EF2;
 border-radius: 100%;
}

Answer 1

The problem is that pure css does not determine the link you are currently on