When applying Hover in a UL, modify LI and DIV

0

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 the ul to modify the background of ul as well as the colors of to and div submenuDescription . And also the background-position of btn-submenu-xstore .

I did this from here, but it did not 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 thing that works is .submenu ul: hover {background: # 00478d;}

    
asked by anonymous 13.06.2017 / 16:30

1 answer

1

The second line of the 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}
    
13.06.2017 / 16:41