Menu's on-hover background height feels small

[pankgeorg]

[pfitzseb]

Could also do with a bit of horizontal padding.

[Hetarth02]

After increasing padding from 0 to 0.3rem it looks much better.

Before
After

[Hetarth02]

@mortenpi Can you take a look at this too?

[mortenpi]

I feel that, rather than adding padding, we should expand the gray highlight to cover the gap between the list items:

Otherwise it will always "feel small" relative to the list item itself. But I think for that we need to add background color to the li, rather than the a.

Could also do with a bit of horizontal padding.

@pfitzseb Where do you actually mean? In front of the list bullet?

[pfitzseb]

Yeah, just add a bit of horizontal and vertical padding to the li (and add the hover effect for that instead of the anchor):

[Hetarth02]

@pfitzseb I cannot understand what you are saying. Are you implying to add the hover effect to li tag after adding padding to the it?

If so, doing that results in this on hover,

[mortenpi]

Are you implying to add the hover effect to li tag after adding padding to the it?

The idea is to fill the gap between the items, without (necessarily) changing the spacing between the items.

That does require having the :hover effect on the li, yes. A "problem" we have right now is that we're doing "padding" with margins in the <li>s. But it should be fine to switch to padding-* there.

Additionally, we may want to adjust the horizontal padding as well.