Alterar cor do menu ao passar o mouse

Layout
1

Estou tentando fazer com que ao passar o mouse pelo menu de categorias, ao se expandir ele mude de cor. Semelhante ao site exemplo. Se for possível um degradê na cor melhor ainda.
Até agora consegui alterar a cor apenas da categoria principal, mas ela fica fixa (sempre com a cor) e as subcategorias não herdam essa cor:
Screen Shot 2022-09-28 at 13.15.52

Utilizei o seguinte código CSS:

/* Alterar fundo menus */
.categoria-id-17256837 {
background: #D2D3D3 !important;
}

Vou continuar estudando CSS mas se alguém já tiver o conhecimento fácil e puder compartilhar agradeço!
Se conseguir o resultado desejado antes posto aqui para outros aproveitarem.

1 curtida
2

irmão to um pouco ocupado aqui…
é possível fazer algo mais compacto, algo que pegue as categorias de forma diferente.
Mas vou mandar para você aqui começar a trabalhar ai.

.complete > div:nth-child(1) > ul:nth-child(1) > li:nth-child(1):hover > a {
  background-color: #0057A9;
}
.complete > div:nth-child(n) > ul:nth-child(n) > li:nth-child(n) > ul:nth-child(n) > li:nth-child(n){
background-color: #0057A9;
}
.complete > div:nth-child(n) > ul:nth-child(n) > li:nth-child(n) > a:nth-child(n) > strong:nth-child(1):hover{
color: #ffffff !important;
font-weight: bold;
}
.complete > div:nth-child(1) > ul:nth-child(1) > li:nth-child(1) > ul:nth-child(2) > li:nth-child(1) > a:nth-child(1){
color: #ffffff !important;
font-weight: bold;
}
.complete > div:nth-child(1) > ul:nth-child(1) > li:nth-child(1) > ul:nth-child(2) > li:nth-child(1) > a:nth-child(1):hover{
color: #0057A9 !important;
font-weight: bold;
}

Qualquer coisa manda ai que a gente ajusta.
Se eu tiver um tempo melhor aqui… eu bolo um código compacto para vc.

1 curtida