title: How to highlight entire area of list item using :hover
body: <p>When hovering over a list item, see Fiddle (<a href="https://jsfiddle.net/22upj1yc/" rel="nofollow">https://jsfiddle.net/22upj1yc/</a>), 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. </p>
  
  <p>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?</p>
  
  <pre><code>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;
  }
  </code></pre>