Archived topic
Padding on submenu gives weird effect on hover
3 replies · Started by Lucy on March 11, 2020
Hi there
I have added a little bit of left padding to my dropdown menu items because otherwise they sat right up against the edge of the dropdown:
.sub-menu li {
padding-left: 10px;
}
But this has lead to a weird effect where the background of the menu item expands to the right on hover outside the dropdown box.
I just can't see why it's doing this! Inspecting the sub-menu element I can't see any hover effects other than the change of colour.
To see the problem, go to the Services dropdown menu and hover over any of the services and you'll see the white extra bit to the right.
I'd be very grateful for any clues!
Many thanks
Lucy
Hi there,
yeah the padding will increase the width of the element by 10px. You can stop this from happening with the box-sizing: border-box; property ie.
.sub-menu li {
padding-left: 10px;
box-sizing: border-box;
}Fantastic support as always - thank you!
You're welcome
