Unwanted moving on hover

HTML & CSS
1

My problem is that when I hover my mouse on one of the menu items, all of them move. How can I avoid this?

2 
a{
padding-left: 50px;
padding-top: 10px;
padding-bottom: 10px; /* look here */
padding-right: 50px;
}

a:hover{
padding-left: 50px;
padding-top: 10px;
padding-bottom: 15px; /* now look here */
padding-right: 50px;
}

Just remove those from the a:hover and it’ll be fine…

1 Like
3

… or just remove them all from the hover :slight_smile:

a:hover{
color: aliceblue;
background-color:rgb(36, 36, 36);
}
1 Like
4

That’s what I meant but was clear as mud… :blush:

1 Like
5

Just to clarify what was said.
There is not need to repeat those padding settings, as a:hover will inherit all the styles from the previously defined a selector.
You only need to define what is different in `a:hover’.

1 Like
6

But remember not to add on hover any values relating to its size (such as padding, border or dimensions) or it will jump when hovered :slight_smile:

1 Like