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

Sutil Web
Sutil Web - Tu sueño hecho diseño

Suspendisse ultricies ultrices viverra. Morbi rhoncus laoreet tincidunt mauris interdum convallis metus suspendiss lacus est.