title: Disable CSS hover effects on active link
body: <p>I've added a hover style on my links but I wouldn't have it on my active class.</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul class="primary_nav"&gt;
      &lt;li&gt;&lt;a href="#" class="nav-link active"&gt;Stream&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="nav-link"&gt;Playlists&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="nav-link"&gt;Likes&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>My CSS :</p>
  
  <pre><code>.nav-link { /* Link default style */
      color: #dedede;
      font-size:1em;
      font-weight: 400;
      text-decoration: none;
  }
  
  .primary_nav .active { /* Add this class for active page */
      @extend .nav-link;
  
      color: #333;
      border-bottom: 3px solid #FF6D00;
      padding-bottom: 16px;
  }
  
  .primary_nav li:hover {
      border-bottom: 3px solid #FF6D00;
      padding-bottom: 16px;
  }
  </code></pre>
  
  <p>You can check it here : <a href="http://jsfiddle.net/nsCP4/" rel="nofollow">http://jsfiddle.net/nsCP4/</a></p>
  
  <p>Do you have an idea how can I "disable" this hover on my active link ?</p>