title: How to underline links in the navbar using Bootstrap 3?
body: <p>I'm trying to apply custom CSS styling to the Bootstrap navbar, so that the link text is underlined on mouseover. I'd also like the underline to fade in.</p>
  
  <p>Here is what I have so far: <a href="https://jsfiddle.net/xfddh0r5/" rel="nofollow">https://jsfiddle.net/xfddh0r5/</a></p>
  
  <pre><code>.navbar-default {
      background-color: #fff;
  }
  .navbar-default .navbar-nav &gt; li {
      background-color: #fff;
  }
  .navbar-default .navbar-nav &gt; li &gt; a {
      color: #333;
      border-bottom: 1px solid transparent;
  }
  .navbar-default .navbar-nav &gt; li &gt; a:hover, .navbar-default .navbar-nav &gt; li &gt; a:focus, .navbar-default .navbar-nav &gt; .active &gt; a, .navbar-default .navbar-nav &gt; .active &gt; a:hover, .navbar-default .navbar-nav &gt; .active &gt; a:focus {
      background-color: #fff;
      color: #439348;
      border-bottom: 1px solid #439348;
  }
  </code></pre>
  
  <p>I've noticed two strange problems:</p>
  
  <ul>
  <li>The underline appears at the bottom of the navbar, rather than directly under the text.</li>
  <li>The link 'area' for the menu items seems to be too big. Ideally just the text would be a link.</li>
  </ul>
  
  <p>Could anyone tell me why this is happening?</p>
  
  <p>Many thanks!</p>