Change menu color by css

Question

I’m trying to leave a menu with a specific color and I’m not getting it, I’ve changed the effect hover but when the mouse is not positioned would like the whole menu to be the color #e70781 and not only in hover, the CSS I have is this:

.menu_block {
    height:60px;
    background-color:#fff;
}
.is-sticky .menu_block {
    z-index:9000;
    left:0;
    width:100%;
    box-shadow:0 1px 0 #e9e9e9;
}

.menu_toggler {display:none;}

.navmenu {float:right;}
.navmenu li {
    position:relative;
    display:inline-block;
    margin:0 0 0 -3px;
}
.navmenu li.sub-menu:hover {
    background: #e70781; /* Old browsers */
    background: -moz-linear-gradient(top, #e70781 0%, #e70781 90%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e70781), color-stop(90%,#e70781)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e70781 0%,#e70781 90%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e70781 0%,#e70781 90%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e70781 0%,#e70781 90%); /* IE10+ */
    background: linear-gradient(to bottom, #e70781 0%,#e70781 90%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e70781', endColorstr='#e70781',GradientType=0 ); /* IE6-9 */
}
.navmenu li.sub-menu:hover:before {
    content:'';
    position:absolute;
    z-index:9999;
    left:0;
    right:0;
    bottom:-2px;
    height:3px;
    background-color:#fff;
}

.navmenu li a {
    position:relative;
    display:block;
    margin:0;
    padding:20px 16px;
    text-transform:uppercase;
    font-weight:900;
    line-height:20px;
    font-size:13px;
    color:#333;
    transition: none;
    -webkit-transition: none;
}
.navmenu li.sale_menu a {
    color:#cc3333;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.navmenu li.sale_menu a:before, .navmenu li.sale_menu a:after {display:none;}

.navmenu li:hover a,
.navmenu li.active a {
    margin-left:-1px;
    margin-right:-1px;
    border-left:1px solid #e9e9e9;
    border-right:1px solid #e9e9e9;
}
.navmenu li:hover a:before,
.navmenu li.active a:before,
.navmenu li:hover a:after,
.navmenu li.active a:after {
    content:'';
    position:absolute;
    left:-1px;
    right:-1px;
    top:-2px;
    height:2px;
    background-color:#333;
}
.navmenu li:hover a:after, .navmenu li.active a:after {top:auto; bottom:-2px;}

.navmenu li.sale_menu:hover a,
.navmenu li.sale_menu.active a {
    margin:0;
    border:0;
    color:#fff;
    background-color:#cc3333;
}

What I need to change is only this menu, I’ve managed to change the color of the menu throughout its extension, doing this:

.menu_block {
    height:60px;
    background-color:#fff;
}

But I need you to have the specific color only where you have options in the menu, minus the basket and search option.

I leave the site for consultation here: Website under development

Answer 1

From what I understand by analyzing the project link code it seems you have to work as these class li.sub-menu.active and . navmenu li.sub-menu so that your CSS looks like this:

li.sub-menu.active { 
    background: transparent;
} 
.navmenu li.sub-menu { 
    background: linear-gradient(to bottom, #e70781 0%,#e70781 90%); 
}

See the result in the image: