Сделать нижнюю границу ближе к тексту

Я хочу подчеркнуть свое меню навигации, но проблема в том, что мне нужно, чтобы оно было толще, поэтому вместо этого я использую нижнюю границу, чтобы установить ширину 6 пикселей..

Кажется, я понял, как сделать границу ближе к тексту. На данный момент между текстом и нижней-рамкой есть зазор примерно в 10 пикселей, и я не хочу его иметь.

Я попытался расположить другой div и расположить его относительно каждого {li} с помощью {bottom:10px}, но не могу заставить его работать.

Вот что у меня есть

КОД

    <div id="menu">
    <ul>
        <li><a href="#home">home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

CSS

#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity:.75;
}

#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}

#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}

#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}

#menu ul li a:hover{
}