/*Estilos para el primer ejemplo de menú*/
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 24px;
  text-align: center;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
#navegador{
  background: #3fa46a;
}
ul {
  display: flex;
  list-style-type: none;
  justify-content: center;
  margin: 0;
}
.link {
  transition: all 0.5s ease;/*añadiendo transición al objeto en reposo también nos la aplica al elemento hover*/
  background: #3fa46a;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid #3fa46a;
  border-bottom: 4px solid #3fa46a;
  padding: 20px 0;
  margin: 0 20px;
}
.link:hover {
  border-top: 4px solid #ffffff; /*modificamos el grosor y el color del borde superior*/
  border-bottom: 4px solid #ffffff;/*modificamos el grosor y el color del borde inferior*/
  padding: 6px 0; /*minificamos el padding*/
}