左边框重叠CSS

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'" : ""; ?>>
      <a href="<?= base_url() ?>dashboard/history">History</a>
</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;
}