Jacob Gray Jacob Gray - 1 month ago 7
CSS Question

How do you make the background color of text higher than the text is?

I am making a simple menu and i have a problem. In my menu, there are several different options with a lightgrey top border. When you hover over the links i have there backgrounds turn lightgrey as well but there is still a small line above each link where they light grey background color does not cover. See the picture below:

enter image description here

I do not want that line to be there. I have tried using padding but to no effect.
Here is my HTML code:

<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>


And here is my CSS:

#wrapper{
width:50%;
margin-right:25%;
margin-left:25%;
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;
font-size:20px;
text-decoration:none;
padding-top:20px lightgrey;
padding-left:10px;
padding-right:10px;
background:lightgrey;
position:relative;

}
ul{
display:inline;
list-style-type:none;
}
li{
display:inline;
}
nav{
height:40px;
width:100%;
background-color:darkgreen;
text-align:right;
}

Answer

I decided just to float the <li>'s, instead of using inline-block or using a table layout:

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