How to leave menu item with different background color permanently

Question

I honestly don’t know how to do, so I’m asking for a hint, I have a menu and I would like the option ENCERRAR SESSÃO was with a background different from what is today permanently, the gray image appears when the mouse pointer is positioned. As I said I made no attempt that could be used as an example to post.

My menu is like this:

The page code looks like this:

<div id="header" class="sticky shadow-after-3 navbar-toggleable-md clearfix">
<!-- TOP NAV -->
<header id="topNav">
    <div class="container">
        <!-- Mobile Menu Button -->
        <button class="btn btn-mobile" data-toggle="collapse" data-target=".nav-main-collapse">
            <i class="fa fa-bars"></i>
        </button>
        <!-- Logo -->
        <a class="logo float-left" href="http://www.meusite.com.br">
            <img src="_imagens/lg_275x80.png" alt="" />
        </a>
        <div class="navbar-collapse collapse float-right nav-main-collapse">
            <nav class="nav-main">
                <ul id="topMain" class="nav nav-pills nav-main">
                    <li class="active">
                        <a href="http://www.meusite.com.br">
                            HOME
                        </a>
                    </li>
                    <li class="active">
                        <a href="iEditalVagas.php">
                            EDITAL DE VAGAS
                        </a>
                    </li>
                    <li class="active">
                        <a href="iAddCurriculo.php">
                            INCLUIR CURRÍCULO
                        </a>
                    </li>
                    <li class="active">
                        <a href="iAtuCurriculo.php">
                            ATUALIZAR CURRÍCULO
                        </a>
                    </li>
                    <?php if ( isset($_SESSION['Nome']) and isset($_SESSION['CPF']) ) { ?>
                    <li class="active">
                        <a href="EncerraSessao.php">
                            ENCERRAR SESSÃO
                        </a>
                    </li>
                    <?php } ?>
                </ul>
            </nav>
        </div>
    </div>
</header>

The css is this:

#topMain>li>a {
    height:96px;
    line-height:96px;
}
#topMain.nav-pills>li>a {
    color:#1F262D;
    font-weight:400;
    background-color:transparent;
} 
#topMain.nav-pills>li:hover>a, 
#topMain.nav-pills>li:focus>a {
    color:#1F262D;
    background-color:rgba(0,0,0,0.03);
}
#topMain.nav-pills>li.active>a {
    color:#687482;
}

#topMain.nav-pills>li>a.dropdown-toggle {
    padding-right:25px;

    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
}
#topMain.nav-pills>li>a.dropdown-toggle:after {
    display: block;
    content: "\f107";
    position: absolute;
    top: 50%;
    right: 17px;
    margin: -5px 0 0;
    font-family: FontAwesome;
    font-size: 12px;
    opacity: .3;
    line-height: 1em;
    border:0;

    -webkit-transition: -webkit-transform .2s ease-in;
    -moz-transition: -moz-transform .2s ease-in;
    -ms-transition: -ms-transform .2s ease-in;
    -o-transition: -o-transform .2s ease-in;
    transition: transform .2s ease-in;
}
#header.bottom.dropup #topMain.nav-pills>li>a.dropdown-toggle:after {
    content: "\f106";
}

#topNav .navbar-collapse {
    float:right;
}

#topNav a.logo {
    height:96px;
    line-height:96px;
    overflow:hidden;
    display:inline-block;
}



@media only screen and (max-width: 1215px) {
    #topMain.nav-pills>li>a {
        font-size:13px;
    }
}

@media only screen and (max-width: 992px) {
    /* Force 60px */
    #header {
        height:60px !important;
    }
    #header #topNav a.logo {
        height:60px !important;
        line-height:50px !important;
    }
    #header #topNav a.logo>img {
        max-height:60px !important;
    }
    #header #topNav #topMain>li>a {
        height:40px !important;
        line-height:40px !important;
        padding-top:0;
    }


    #topMain>li {
        border-bottom:rgba(0,0,0,0.1) 1px solid;
    }
    #topMain>li:last-child {
        border-bottom:0;
    }

        #header li.search .search-box {
            margin:0 !important;
            position:fixed;
            left:0; right:0;
            top:60px !important;
            width:100%;
            background-color:#fff;
            border-top:rgba(0,0,0,0.1) 1px solid;
        }
}

Answer 1

I believe that as in your CSS all rules are from Ids, only other ID rules at the end of the file or using by attribute style would override CSS rules:

<li class="active" style="color:#1F262D;background-color:rgba(0,0,0,0.03);">
    <a href="EncerraSessao.php">
        ENCERRAR SESSÃO
    </a>
</li>

I put the rule of :hover right there, see if it overlaps.

Answer 2

After making several attempts, including with some tips from the staff, I did so:

I customized the css snippet, so:

    #topMain.nav-pills>li.encerrar:last-child>a {   
        background-color:#006338!important;
        color: #FFFFFF;
    }   

Then, for the effect to be applied only the option ENCERRAR SESSÃO in class of the link create the option encerrar, being like this:

<li class="active encerrar">
    <a href="EncerraSessao.php">
    ENCERRAR SESSÃO
    </a>
</li>