Estou tentando deixar um menu com uma cor específica e não estou conseguindo, já alterei o efeito hover
mas quando o mouse não está posicionado gostaria que todo o menu ficasse a cor #e70781
e não somente no hover
, o CSS que tenho é esse:
.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; }
O que preciso mudar é somente esse menu, já consegui alterar a cor do menu em toda a sua extensão, fazendo isso:
.menu_block { height:60px; background-color:#fff; }
Mas preciso que fiquem com a cor específica só onde tem opções no menu, menos a opção cesta e busca.
Deixo o site para consulta aqui: Site em desenvolvimento
li.sub-menu.active { background: transparent;}
o restante do menu com cor de BG.navmenu li.sub-menu { background: linear-gradient(to bottom, #e70781 0%,#e70781 90%); }
veja como fica na imagem imgur.com/VM7Y6CI