Estoy trabajando con un menú, el cual tiene las opciones de INICIO, REGISTRAR y MOSTRAR, cuando paso el cursor esas opciones cambian de color, eso funciona bien, lo que quiero hacer es que cuando entre a una de estas opciones permanezca el color, ya que al momento de dar click y entrar el color se quita, e intentado con la propiedad active en CSS pero no me funciona, aqui anexo mi código.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inicio</title>
<link rel="stylesheet" href="navbar.css">
</head>
<body>
<header>
<div class="row">
<a href="home.php"></href></ahref><img src="imagenes/logo.png" alt="Logo-INE"></a>
<ul class="main-nav">
<?php if ($_SESSION['level'] == 1 || $_SESSION ['level'] == 2):?>
<li><a href="home.php">INICIO</a></li>
<li><a href="registrociudadanos.php">REGISTRAR</a></li>
<li><a href="mostrar.php">MOSTRAR</a></li>
<?php endif; ?>
<li><?php echo $_SESSION["name"];?></li>
<li><a href="salir.php">SALIR</a></li>
</ul>
</div>
</header>
</body>
</html>
CSS
header {
font-weight: bold;
background-color: white;
height: 10vh ;
background-size: cover;
background-position: center;
padding: auto;
color: darkgrey;
font-size: 15px;
font-family: "Lucida Sans";
border-bottom: #880e4f 2px solid;
text-transform: uppercase;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
display: block;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: darkgrey;
text-decoration: none;
padding: 5px 20px;
display: block;
font-family: "Lucida Sans";
font-size: 15px;
}
.main-nav li a:active {
color: #c2185b;
}
.main-nav li a:hover {
color: #c2185b;
}
img {
width: 180px;
height: auto;
float: inherit;
}