Overlap border-left CSS - php

Question

I have a menu with some css on it.
I activate it when the page is active
<li <?php echo (strpos(current_url(), 'history') !== false) ? "class='active'" : ""; ?>>
History
</li>
I also have css for menu it self when is hover and focus
.side-nav li a:hover,
.side-nav li a:focus {
outline: none;
background-color: #f8f8f8 !important;
font-weight: bold;
border-left: 6px solid #337AB7;
-webkit-box-shadow: -4px 4px 6px -4px #a5a5a5;
box-shadow: -4px 4px 6px -4px #a5a5a5;
}
And class active is
.side-nav li.active{
background-color: #f8f8f8 !important;
font-weight: bold;
border-left: 6px solid #337AB7;
-webkit-box-shadow: -4px 4px 6px -4px #a5a5a5;
box-shadow: -4px 4px 6px -4px #a5a5a5;
}
My problem is when active class is active and i hover over the menu bar i have 2 borders on that element.
How can i remove the second border when element is active?

Answer 1

Your problem is, that you are accessing two different elements with your css. With the first definition you are accessing the pseudo-selectors :focus and :hover on any a element within a li element in your .side-nav. With the second definition you are only accessing the li element, and not the contained a element. Defining your .active class as follows should fix your problem:
.side-nav li.active a {
background-color: #f8f8f8 !important;
font-weight: bold;
border-left: 6px solid #337AB7;
-webkit-box-shadow: -4px 4px 6px -4px #a5a5a5;
box-shadow: -4px 4px 6px -4px #a5a5a5;
}