Enlace de navegación activo/actual con CSS

Enlace de navegación activo/actual con CSS

Os dejamos un ejm de cómo con CSS podemos crear barras de navegación, en este caso se mostrará un enlace de navegación activo.

El código sería el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #04aa6d;
}
</style>
</head>

<body>
<ul>
<li><ahref="#"class="active">Home</a></li>
<li><ahref="#">Quienes somos</a></li>
<li><ahref="#">Donde estamos</a></li>
<li><ahref="#">Contacto</a></li>
</ul>
</body>

</html>

El resultado sería el siguiente