Problem filling container height on hover

HTML & CSS
1

Here is the sample code: https://codepen.io/bmcdesign/pen/GRZrJxg

When you hover on a text item, the background does not fill the container.

Here is how I’m adjusting the background right now:

li:hover {
    background-color: gray;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: -30px;
    margin-bottom: -30px;
}

Is there a better way to do this? It seems there should be a more automatic way of doing it, without adjusting it pixel by pixel. I’m using Flexbox, so maybe there is a feature I could use?

Thanks!

2

Hi,

It is the browser’s default margin/padding that add height to the list.

Try the standard list reset on the ul:

ul {
  padding:0;
  margin:0;
}
3

I tried adding that, but the background on hover still doesn’t fit the maximum height. I tried getting rid of the padding and margins in li:hover as well.

4

Hint: Is it overflowing the container with 5px? :rofl:

5

Oops! Haha, I solved it now. Thanks.

I added this to the top as well:

* {
  margin: 0;
  padding: 0;
}
6

How did that fix the padding difference of the navigation container (25px) and the hover padding/margin (30px) for the list-items? :thinking:

N.B. The common general reset should only be used for testing! It is not recommended in any other case because that messes with all element. Instead reset the elements that needs it in current code.

1 Like
7

Next time I’ll put my whole project on Codepen, because this is where the confusion came from. I tried giving a sample in the link above that highlighted the problem. The reason I got mixed up is because I tested it on my project thinking it would be the same as the Codepen link.

I did the general reset for other parts of the site. That is a good point that it’s only for testing. I didn’t know that and I won’t do it that way anymore. :slight_smile:

2 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.