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

Question

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 1

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/

Answer 2

I'd recommend changing your css from this

.header a:hover{
  background-color: #f3e5d8;
}

to this

.header li:hover{
  background-color: #f3e5d8;
}

This will make it so any list item within your header class will change its background colour when hovered.

Answer 3

https://jsfiddle.net/b8js8zkq/1/

Fixed fiddle.

You remove the padding on both <h3> and <li> , and add that same padding to the <a> -tag.

Answer 4

jsfiddle update

Old

 .header a:hover {
  background-color: #f3e5d8;
}

New

.header li:hover {
   background-color: #f3e5d8;
}

You want to change the color of the li element rather than just the a tag