Barra de navegación horizontal con CSS

Barra de navegación horizontal con CSS

Veamos un ejemplo de una barra de navegación horizontal con CSS. El código que hay que crear es 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 {
background-color: #111;
}
</style>
</head>

<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="">Quienes somos</a></li>
<li><a href="#">Dondes estamos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</body>
</html>

El resultado es 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.