menu

by poselab

HTML

<ul class="navigation">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Sobre Nosotros</a></li>
  <li><a href="#">Servicios</a></li>
  <li><a href="#">Contacto</a></li>
</ul>

CSS

.navigation {
  list-style: none;
  background: lightgrey;
  display: flex;
  height: 60px;
  max-width: 960px;
  align-items: center;
  margin: auto;
}

.navigation li {
  flex-grow: 1;
}

.navigation a {
  text-align: center;
  display: block;
  padding: 0.5rem;
  color: black;
  border: 1px solid grey;
}

.navigation a:hover {
  background: blue;
}