title: How to disable hover effect for active link?
body: <p>Hi I'm having a hard time finding out how to disable the hover effect in my active link. Every time I hover it to the active link it also changes the color, so I want to disable it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navibar {
    height: 26px;
    width: 100%;
    display: inline-block;
    background: #F7FDFD;
    font-family: Arial;
    font-size: 1.1em;
    font-weight: 200;
    border-bottom: 1px solid #A2BFF3;
    margin-top: 10px;
  }
  .navibar ul {
    text-align: center;
    padding-top: 3px;
    overflow: hidden;
  }
  .navibar li {
    float: right;
    display: inline-block;
    width: 90px;
    text-transform: lowercase;
    font-family: Arial;
    font-size: 1.0em;
    font-weight: 200;
  }
  .navibar li:hover {
    background: #A2BFF3;
    color: #FFFFFF;
    border-radius: 2px;
  }
  .navibar li.active {
    background: #ffffff;
    color: #000000;
    border: 1px solid #a2bff3;
    border-top: 3px solid #04afba;
    border-bottom: 1px solid transparent;
    margin-top: -2px;
  }
  .navibar a {
    display: block;
    color: #b3b3b3;
  }
  .navibar a:hover {
    display: block;
    color: #000000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navibar"&gt;
    &lt;ul&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;More&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>