quede - quitar el subrayado de los enlaces en html/css

El elemento de enlace css salta sobre el vuelo estacionario

Question

Estoy tratando de poner un borde alrededor de un enlace en vuelo estacionario, y el estilo se aplica a él, pero salta (el elemento salta) cuando estoy sobre él ... ¿qué puedo hacer? código:

  .navigation li:hover {
   border: 1px solid #ccc;
 }

Answer 1

Tu "salto" es causado por la altura de 1px del borde, que hace que tu li se mueva

Puede usar

 .navigation li:hover {
   border-color: #ccc;
 }

 .navigation li {
   border: 1px solid #<parentBackgroundColor/transparent>;
 }

en lugar. De esta manera, el borde está aquí desde el principio, por lo que no hay salto en el vuelo estacionario, y es invisible, ya que es del mismo color que el contenedor principal o transparente.

Answer 2

.navigation li {
    border: 1px solid transparent;
}

Puede agregar un border transparente cuando no está suspendido, entonces no saltará.

O bien, puede eliminar un total de 2 2px padding vertical alrededor del elemento, por ejemplo:

.navigation li {
    padding: 10px
}
.navigation li:hover {
    padding: 9px;
    border: 1px solid #ccc;
}