Tenho a seguinte estrutura:
<div class="submenu">
<ul>
<li>
<div class="btn-submenu btn-submenu-xstore"></div>
<a href="/plataforma-de-ecommerce">xStore - Plataforma de E-commerce</a>
<div class="submenuDescription">Tecnologia para a realização de vendas de forma prática, segura e completa.</div>
</li>
</ul>
Eu quero que quando eu passe o mouse no ul, ele modifique o background da própria ul e também as cores de a e da div submenuDescription. E também o background-position de btn-submenu-xstore.
Fiz isso daqui, mas não deu certo:
.submenu ul:hover {background: #00478d;}
.submenu ul:hover .submenu ul li a {color: #fff;}
.submenu ul:hover .submenuDescription {color: #fff;}
.submenu ul:hover .btn-submenu-xstore {background-position: -50px}
O único que funciona é o .submenu ul:hover {background: #00478d;}