How to set the hover state equals the active state with li clearfix element using ui-sref-active="active"

Question

I create 2 buttons on one line and have some problem with styling them correctly with the template i'm using.

The button has 4 states but when client is active it goes wrong.

The first state is when nothing is happens.

The second state is when the + sign is active or in hover status

On de third state when i hover over clients i get this: which works correctly.

But when the client is active i get the same result as when nothing is active. So what could i do to get the active state equals to the hover state from picture 3.

the html goes like this:

    <li  ui-sref-active="active" class="clearfix li-button"> <a class="btn btn-primary-li-left" ui-sref="app.clients"  ripple=""><em class="sidebar-item-icon icon-head"></em> Clients  </a> <a  class="btn btn-primary-li-right "  ui-sref="app.addclient" >+</a>  </li>

I use app.html as template where i have this:

<aside ng-include="'html/main/templates/sidebar.html'" ng-class="app.theme.sidebar"></aside>

the class app.theme.sidebar == #bg-white

The css i added is this it works without the template :

.li-button  a{
    float:left;
    display: block;
}

.li-button  a:first-child{
    width: 77%;
}

.li-button  a:last-child{
    width: 15%;
    margin-left: 2%;
    margin-right: 2%;
    color: #ffffff;

}

.btn-primary-li-left {
    text-align: left;
    vertical-align: middle;

    font-weight: 900;
    height: 40px;
}

.btn-primary-li-right {
    height: 40px;
    text-align: center;
    vertical-align: middle;

    font-weight: 900;
}


.li-button  a:last-child:hover {

    color: #ffffff;
    background: #0493ac;
}

.li-button  a:first-child:hover +a:last-child{
    color: #ffffff;
    background: #0e8eac;
}

I think it has something todo with this which is from the template :

#bg-white .nav > li.active,
.bg-white .nav > li.active {
    background-color: #0df9ee !important;
}

#bg-white .nav > li:hover > a,
.bg-white .nav > li:hover > a {
    background-color: #00f3bd;
}
#bg-white .nav > li.active > a,
.bg-white .nav > li.active > a {
    background-color: #f32400;
}

EDIT

So i did a bit modification on the answer of Shane but i still do not get the result i wanted it got even weirder.

if i do this the button is green

#bg-white .nav > li > a.btn-primary-li-left,
.bg-white .nav > li >a.btn-primary-li-left{
    background-color: #05f900 !important;
} 

but when i add the active element nothing happens and get the same result as the first picture in this question.

#bg-white .nav > li > a.btn-primary-li-left.active,
.bg-white .nav > li >a.btn-primary-li-left.active {
    background-color: #05f900 !important;
}

Answer 1

You're not targeting the same selector structure, remove the #bg-white ... CSS for .active and try this:

.li-button.active a:first-child + a:last-child {
    color: #ffffff;
    background: #0e8eac;
}

.li-button.active a {
    background: #eee;
}

Working example: http://codepen.io/anon/pen/PPdOvZ?editors=110

EDIT

Based on your edit, the active class isn't being applied to the anchor tag. It's being applied to the li, change your updated code to this:

#bg-white .nav > li.active > a.btn-primary-li-left,
.bg-white .nav > li.active > a.btn-primary-li-left {
    background-color: #05f900 !important;
}