How to add space between border line and menu item

How to add space between border line and menu item

I'm trying to add space between a bottom border line and my <li> item but
no luck.
My code:
<div class="menuwrap">
<div class="menu">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Query</a>
</li>
<li><a href="#">Reports</a>
</li>
</ul>
</div>
</div>
CSS styles:
.menu {
color: #000;
background: #FFF;
}
.menu ul {
list-style: none;
display: inline;
float: left;
padding-left: 40px;
margin-top: 90px;
}
.menu li {
float:left;
margin-left:10px;
}
.menu li a:hover {
padding: 0 10px 0 10px;
font-size: xx-large;
border-bottom: 1px solid white;
border-spacing: 20px;
}
.menu li a {
text-decoration: none;
color: #000;
font-weight: bold;
font-size: large;
}
.menuwrap {
overflow:hidden;
}
I tried couple of different things, but nothing worked so far.
border-spacing is not doing what I want. I tried padding-bottom and that
also didn't work. Can someone tell me how to achieve that? I want a space
between the "li" item and its border-bottom.