How to highlight entire area of list item using :hover - html

Question

When hovering over a list item, see Fiddle (https://jsfiddle.net/22upj1yc/), I want the black highlight to cover not the entire area of the list item, not leaving any white space on top or bottom. Right now it only covers the center area of the list item.
I have tried removing the padding from ul and adding a height to li like this, but it does not work. How do I do this?
ul {
display: inline-block;
list-style: none;
margin: 0 auto;
background: #fff;
border-bottom: 2px solid #d8d8d8;
}
ul li {
display: inline-block;
border-right: 1px solid #d8d8d8;
height: 50px;
}

Answer 1

Add the hover to the <li> instead of the <a> tag, see fiddle https://jsfiddle.net/22upj1yc/1/
ul li:hover {
background-color: black;
}

Answer 2

I basically have updated your item, look in this jsfiddle.
Instead of just ul { }, I have made it ul li { }.
CODE
body {
font: 15px/1.625em "Helvetica Neue", Helvetica, sans-serif;
background: #f5f5f5;
}
ul li {
display: inline-block;
list-style: none;
padding: 10px;
margin: auto;
background: #fff;
border-bottom: 2px solid #d8d8d8;
}
ul li {
display: inline-block;
border-right: 1px solid #d8d8d8;
}
ul li a {
color: #777;
text-decoration: none;
padding: 0 12px;
}
ul li:hover {
background-color: black;
}
ul li.next {
border-right: 0;
}
ul li.next:after {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
padding: 0 10px;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="next">
Next
</li>
</ul>

Answer 3

Remove padding top and bottom from ul
ul {
display: inline-block;
list-style: none;
padding: 0 10px;
margin: 0 auto;
background: #fff;
border-bottom: 2px solid #d8d8d8;
}
And add padding to li
ul li {
display: inline-block;
border-right: 1px solid #d8d8d8;
padding:10px 0px;
}
here is link for jsfiddle https://jsfiddle.net/22upj1yc/6/
!--Sorry for bad English--!

Answer 4

The inline-block elements are adding around 4px space after each element (changes by browser). You can negate this with font-size: 0 on that element and switch your font size to apply directly to the li or a tags.
css
body {
background: #f5f5f5;
// removed font sizing, replaced in ul li below
}
ul {
display: inline-block;
font-size: 0; // get rid of ghost space after inline-blocks
list-style-type: none;
background: #fff;
border-bottom: 2px solid #d8d8d8;
margin: 0; padding: 0;
}
ul li {
display: inline-block;
border-right: 1px solid #d8d8d8;
text-align: center;
margin: 0;
padding: 0px 6px; // added some left/right padding
font: 15px/1.625em "Helvetica Neue", Helvetica, sans-serif; // moved your font sizing here
}
...there were some other padding issues I believe, basically I set all else to 0.
fiddle
https://jsfiddle.net/Hastig/3ezn15a0/1/