current-menu-item class not working

current-menu-item class not working for particular menu in my theme, My css code is

.mainNav ul li a {
color: #686868;
font-size: 14px;
height: 38px;
line-height: 38px;
display: inline-block;
padding: 0 10px;
border-radius: 2px; 
}


.mainNav ul li.current-menu-item a,
.mainNav ul li.current-menu-item a:focus {
    background: #69bd43;
    color: #ffffff; 
}

.mainNav ul li a:hover {
    background: #69bd43;
    text-decoration: none;
    color: #ffffff;
}

.mainNav ul li a:hover

and

.mainNav ul li a

is working

but

.mainNav ul li.current-menu-item a, .mainNav ul li.current-menu-item a:focus

Not working

see the below screen shot

.current-menu-item working in "Natural Foods" Menu

But Not working in "Books" Menu

See below screen shot

In My header.php

<nav class="mainNav">

            <?php 
                $args = array(
                    'theme_location' => 'primary' 
                 );
            ?>  
            <ul class="container"><?php wp_nav_menu( $args ); ?></ul>               

        </nav><!-- End mainNav -->

In My style.css

/* Header */

.mainNav {
    background: #ffffff;
    margin-top: 45px;   
}

.mainNav ul li {
    display: inline-block;
}

.mainNav ul li a {
    color: #686868;
    font-size: 14px;
    height: 38px;
    line-height: 38px;
    display: inline-block;
    padding: 0 10px;
    border-radius: 2px;
}

.mainNav ul li.current-menu-item a,
.mainNav ul li.current-menu-item a:focus {
    background: #69bd43 !important;
    color: #ffffff; 
}

.mainNav ul li a:hover {
    background: #69bd43;
    text-decoration: none;
    color: #ffffff;
}