css link element jumps on hover

Question

I am trying to put a border around a link on hover, and the style applies to it, but it jumps (the element jumps) when i hover over it... what can I do? code:

Answer 1

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

You can add a transparent border when you're not hovering, then it won't jump.

Or, you can remove a total of 2px vertical padding around the element, for example:

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