Text Not Vertically Aligned in li - css

Question

I'm working on a menu and having some trouble with text not appearing the way I'd like it to.
Here is a screenshot of what I'm having trouble with. There appears to be extra space below the link—the top and bottom aren't equal. There is no padding there, either. It is just a link within an <li>. What do I have wrong?
ul {
list-style-type: none;
height: 184px;
text-align: right;
padding: 0;
font-weight: 300;
}
li {
display: inline-block;
width: 50%;
text-align: left;
}
a:link, a:active {
font-size: 16px;
color: #000;
text-decoration: none;
-webkit-transition: background-color 0.3s, border-color 0.3s;
transition: background-color 0.3s, border-color 0.3s;
line-height: 2em;
}
a:hover {
background-color: #adadad;
}
a {
width: 100%;
padding: 0 0.5em;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>

Answer 1

I see no issues. Apply your css styles to your A tag though, not the li. Also, for clarity to see what is going on, I put a border around each a tag. Check out the fiddle, everything looks fine to me. Height in DIV's is automatic if you don't set it statically. i.e., it all looks fine, I see no extra spacing with the CSS I provided below.
http://jsfiddle.net/4dbuuuq4/
CSS
ul {
list-style-type: none;
height: 184px;
padding: 0;
font-weight: 300;
}
li a {
display: inline-block;
width: 50%;
text-align: left;
border:solid 1px #ccc;
}
li a:hover{
cursor:pointer;
background-color:#ccc;
color:#fff;
}
a:link,
a:active {
font-size: 16px;
color: #000;
text-decoration: none;
-webkit-transition: background-color 0.3s, border-color 0.3s;
transition: background-color 0.3s, border-color 0.3s;
}
a {
width: 100%;
padding: 0 0.5em;
}

Answer 2

You can use display: table-cell instead of inline-block and use height instead of line-height on a:
ul {
list-style-type: none;
height: 184px;
text-align: right;
padding: 0;
font-weight: 300;
}
li {
display: inline-block;
width: 50%;
text-align: left;
}
a:link,
a:active {
font-size: 16px;
color: #000;
text-decoration: none;
-webkit-transition: background-color 0.3s, border-color 0.3s;
transition: background-color 0.3s, border-color 0.3s;
}
a:hover {
background-color: #adadad;
}
ul li a {
width: 100%;
padding: 0 0.5em;
display: table-cell;
vertical-align: middle;
height: 2em;
}
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact Us
</li>
</ul>