title: Bootstrap3 Nav Link Style with underline
body: <p>I am looking to style Bootstrap Menu as in Youtube with underline.</p>
  
  <p><img src="https://i.stack.imgur.com/TiBmI.png" alt="enter image description here"></p>
  
  <p>So far I have done below code but not achieving the effect ,
  <strong>border bottom is not working for a:active.</strong></p>
  
  <p>I have added my css after the bootstrap css , so no possibility of override but still not working.</p>
  
  <p><strong>Style CSS</strong></p>
  
  <pre><code> a {
      color: black;
  }
  
  
  .navbar-nav&gt;li&gt;a:hover ,
  .navbar-nav&gt;li&gt;a:active {
      border-bottom: 2px solid #ad1f2d!important;
  }
  </code></pre>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>  &lt;div class="navbar" role="navigation"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  @*&lt;a class="navbar-brand" href="#"&gt;&lt;img src="../../img/logo.jpg" alt="77 Markets" height="100" width="100" style="margin-left: -10px; margin-right: 20px"&gt;&lt;/a&gt;*@
              &lt;/div&gt;
              &lt;div class="navbar-collapse navbar-right collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt;                       
                  &lt;/ul&gt;
                  @Html.Partial("_LoginPartial")
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>