CSS ul.topnav li a:active - css

Question

I am trying to set the current "active" link to white to show which page the user is on.
I see see on a previous post
"A link only takes up the a:active state when it is clicked, so you only see the change for a few seconds. You should look for a different way for getting it done, like adding a new css class for the selected menu item from your server side script. "
Q. How do I do this?
My CSS is:
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
ul.topnav li {
float: left;
}
ul.topnav li a:link {
color: black;
text-align: center;
padding: 10px 12px;
text-decoration: none;
font-size: larger;
font-family: Arial;
font-weight: bold;
}
.topnav ul li.current a {
color: Black;
}
/*
ul.topnav li a:visited {
color: black;
}
*/
ul.topnav li a:hover:not(.active) {
color: Aqua;
text-decoration: none;
transition: none;
}
l.topnav li a:hover:active {
color: white;
text-decoration: underline;
}
ul.topnav li a:active {
color: white;
transition: none;
text-decoration: underline;
}
<ul class="topnav">
<!--<li><a class="active" href="../index.html">HOME</a></li>-->
<li> HOME</li>
<li> ABOUT</li>
<li> NEW</li>
<li> PRODUCTS</li>
<li> CATALOG</li>
<li> SEARCH</li>
<li> DISTRIBUTORS</li>
<li> SERVICE</li>
<li> CONTACT</li>
</ul>
I hope this information helps. Been trying to fix this for awhile now.
Regards,
Larry

Answer 1

You will need to update the html of your navigation to include an identifier for the "current"/"active" page. This would mean updating your .html pages to add something like class="active" to the link that represents the current page. You would then update your css to something like:
ul.topnav li a:hover:not(.active) {
color: Aqua;
text-decoration: none;
transition: none;
}
ul.topnav li a.active:hover,
ul.topnav li a.active {
color: white;
transition: none;
text-decoration: underline;
}

Answer 2

I was able to fix the problem of setting active links "white" and inactive ones "black using javascript. You can see the result here: http://www.nav-aids.com/new-navaids/index.html
My menu is setup as:
<div class="col-7 col-m-7">
<ul class="topnav">
<li> <a id="index" href="../index.html">HOME</a></li>
<li> <a id="about" href="../Aboutus.html">ABOUT</a></li>
<li> <a id="new1" href="../new.html">NEW</a></li>
<li> <a id="products" href="../Samples.html">PRODUCTS</a></li>
<li> <a id="catalog" href="../catalog.html">CATALOG</a></li>
<li> <a id="search1" href="../search.html">SEARCH</a></li>
<li> <a id="distributors" href="../distributors.html">DISTRIBUTORS</a></li>
<li> <a id="service" href="../service.html">SERVICE</a></li>
<li> <a id="contact" href="../Mailto.html">CONTACT</a></li>
</ul>
</div>
<div class="col-2 col-m-2">
<div></div>
</div>
</td>
</tr>
</table>
</div>
<!-- set active menu item to white, inactive to black -->
<script language="JavaScript" type= "text/javascript">
menuactive()
</script>
My javascript is:
/* set menu button to white when selected and black if not selected */
function menuactive() {
/* The javascript below returns the menu page name in sPath */
var sPath = window.location.pathname;
//var sPage = sPath.substring(sPath.lastIndexOf('\\') + 1);
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
/* alert below used to verify which menu page selected */
/*alert(sPage);*/
if (sPage == "index.html") {
var x = document.getElementById("index");
x.style.color = "white";
} else {
var x = document.getElementById("index");
x.style.color = "black";
}
if (sPage == "Aboutus.html") {
var x = document.getElementById("about");
x.style.color = "white";
} else {
var x = document.getElementById("about");
x.style.color = "black";
}
if (sPage == "new.html") {
var x = document.getElementById("new1");
x.style.color = "white";
} else {
var x = document.getElementById("new1");
x.style.color = "black";
}
if (sPage == "Samples.html") {
var x = document.getElementById("products");
x.style.color = "white";
} else {
var x = document.getElementById("products");
x.style.color = "black";
}
if (sPage == "catalog.html") {
var x = document.getElementById("catalog");
x.style.color = "white";
} else {
var x = document.getElementById("catalog");
x.style.color = "black";
}
if (sPage == "search.html") {
var x = document.getElementById("search1");
x.style.color = "white";
} else {
var x = document.getElementById("search1");
x.style.color = "black";
}
if (sPage == "distributors.html") {
var x = document.getElementById("distributors");
x.style.color = "white";
} else {
var x = document.getElementById("distributors");
x.style.color = "black";
}
if (sPage == "service.html") {
var x = document.getElementById("service");
x.style.color = "white";
} else {
var x = document.getElementById("service");
x.style.color = "black";
}
if (sPage == "Mailto.html") {
var x = document.getElementById("contact");
x.style.color = "white";
} else {
var x = document.getElementById("contact");
x.style.color = "black";
}
}
/* End menuactive */
BUT - I have a problem. My css hover no longer works. CSS I am using is:
ul.topnav li a:hover:not(.active) {
color: Aqua;
text-decoration: none;
transition: none;
}
ul.topnav li a.active:hover,
ul.topnav li a.active {
color: white;
transition: none;
}
Hovered links do not turn "Aqua". Any ideas?
Thanks.
Larry