How to disable hover effect for active link?
<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>