title: How to not make border-bottom push and inconsistency on IE11
body: <p>How can I make it so that my <code>border-bottom</code> on hover, does not extend <code>height</code> of the parent but maintains it so that everything stays the same except that the <code>border</code> is shown?</p>
  
  <p>Also, when checking this out in IE 11, the <code>border</code> is not really at the bottom of the parent, but you can see like a <code>1px</code> white space in-between. Is there anything I could do to make it work consistently?</p>
  
  <p><strong><a href="http://jsfiddle.net/vdptxcg8/" rel="nofollow">JSFiddle Demo</a></strong></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#main-nav {
      overflow: hidden;
      border: 1px solid #ddd;
      border-width: 1px 0;
      margin-top: 70px;
      line-height: 38px;
  }
  
  .menu {
      margin: 0;
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: left;
      color: #666;
      margin-right: 5px;
  }
  
  #search {
      float: right;
  }
  
  li:hover {
      border-bottom: 2px solid #000;
  }
  </code></pre>
  
  <p><strong>HTML5</strong></p>
  
  <pre><code>&lt;nav id="main-nav"&gt;
      &lt;ul class="menu"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Test 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Test 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;form id="search" action="#" autocomplete="off"&gt;
          &lt;input type="text" id="query" name="query"&gt;
      &lt;/form&gt;
  &lt;/nav&gt;
  </code></pre>