I want to underline my navigation menu but the problem is that I need it to be thicker so I am using bottom border instead so that I can set the width to 6px.

I can seem to figure out how to get the border to appear closer to the text. There seems to about a 10px gap between the text and the bottom-border at the moment and I don't want to have any. 

I have tried to position another div and position it relative to each {li} with {bottom: 10px} but I can't seem to get it to work.

Here's what I have so 

CODE

```
    <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{
}

```