如何使文本的背景颜色高于文本？

Question

我正在制作一个简单的菜单，我遇到了问题。

在我的菜单中，有lightgrey个上边框的几个不同选项。当您将鼠标悬停在我所拥有的链接上时，背景也会变为lightgrey，但每个链接上方仍有一条小线，其中lightgrey背景颜色未覆盖。

见下图：

我不希望那条线在那里。我尝试过使用填充但没有效果。

#wrapper {
  width: 500px;
  border-top: lightgrey 3px solid;
}
li a {
  color: white;
  font-size: 20px;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  height: 40px;
  padding-left: 10px;
  padding-right: 10px;
}
li a:hover {
  color: black;
  background: lightgrey;
}
ul {
  display: inline;
  list-style: none;
}
li {
  display: inline;
}
nav {
  height: 40px;
  width: 100%;
  background-color: darkgreen;
  text-align: right;
}

<div id="wrapper">
  <nav>
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">News</a>
      </li>
      <li><a href="#">Articles</a>
      </li>
      <li><a href="#">Forum</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <li><a href="#">About</a>
      </li>
    </ul>
  </nav>
</div>

Answer 1

<div id="wrapper">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>

CSS

#wrapper{
width: auto;
margin-right:25%;
margin-left:25%;
}
nav{
    display: table;
    background-color:darkgreen;
    border-top:lightgrey 3px solid; 
}
ul{
    padding: 0;
    margin:10px 0 0 0;
}
li{
    list-style: none;
    float: left;
}
a{
    text-decoration: none;
    color: white;
    font-size:20px;
    background-color: darkgreen;
    padding: 10px;
}
a:hover{
    text-decoration: none;
    color: black;
    font-size:20px;
    background:lightgrey;
}

Answer 2

我决定只浮动<li>，而不是使用inline-block或使用表格布局：

li {
  float: left;
}

li a {
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  display: block;
  color: white;
}

Updated JSfiddle