When applying Hover to a UL, modify LI and DIV

Question

I have the following structure:

<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>

I want that when I pass the mouse on ul, it modifies the background of itself ul and also the colors of to and of div submenuDescription. And also the background-position of btn-submenu-xstore.

I did it from here, but it didn’t work:

.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}

The only one that works is . submenu ul:Hover {background: #00478d;}

Answer 1

The second line of CSS is incorrect, but the rest is working. It should look like this:

.submenu ul:hover {background: #00478d;}
.submenu ul:hover li a {color: #fff;}
.submenu ul:hover .submenuDescription {color: #fff;}

EDIT

.submenu ul:hover .btn-submenu-xstore, 
.submenu ul:hover .btn-submenu-b2b,
.submenu ul:hover .btn-submenu-marketplace {background-position: -50px}