jacobtohahn jacobtohahn - 15 days ago 10
HTML Question

How do I make my link hover background fill the entire background?

I made a simple navigation menu using a ul, but when you hover over it, the background color will not change the entire background. I think it may have to do with my

padding
elements. How do I fix this?

Here is a Fiddle of my code: https://jsfiddle.net/b8js8zkq/

I have looked at How do I make the hover background color fill the height of the link? and did not find a good answer there, so please don't mark this as a duplicate of that.

Answer

The problem with your code is, you have margin and padding on both <h3> and <li>. So remove them and add them as padding to the <a> tag. And you are done!

The padding and margin of each 15px constitute 30px of total padding to <a>. That's what I have done below:

.header li {
  border-bottom: 1px solid #888;
  font-size: 20px;
  padding: 0;
}
ul h3 {
  margin: 0;
  padding: 0
}
.header a {
  display: block;
  padding: 30px;
}

Fiddle: https://jsfiddle.net/19r4a4ft/