title: Make Bottom Border Closer To Text
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>Here's what I have so </p>
  
  <p>CODE</p>
  
  <pre><code>    &lt;div id="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#home"&gt;home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#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{
  }
  </code></pre>