title: Border-bottom issue (expanding downwards on hover)
body: <p>I'm working on a navigation, and I can't seem to figure out how to make the bottom border increase in size upwards, instead of expanding downwards (which in turn extends my header a few pixels), I could fix the extending header with setting a height, but the the border will still extend downwards instead of upwards.</p>
  
  <p>The CSS:</p>
  
  <pre><code>header {
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    position: absolute;
    background: #000000;
  }
  ul {
    list-style-type: none;
    display: block;
    margin: 0 0 0 20px;
    padding: 0;
  }
  ul li {
    display: inline-block;
    padding: 0;
  }
  ul li a{
    display: block;
    border-bottom: 1px solid #fff;
    font-size: 19px;
  }
  ul li a:hover{
    border-bottom: 2px solid #fff;
    background: #333;
    font-size: 19px;
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;header&gt;
    &lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href=""&gt;link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;link 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;link 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>The JSFiddle:</p>
  
  <p><a href="http://jsfiddle.net/Artsen/EZWvF/" rel="nofollow">http://jsfiddle.net/Artsen/EZWvF/</a></p>