Setting "a" color withing a "li" on hover

Question

I'm using a platform that allows the user to change the elements settings with css, and I'm trying to make the "a" change color when hovering over the "li", but the color of the "a" does not change, how should i fix this? And I know I can change the "a" if I hover over it, but I want it to change while hovering over the "li".

<div class="top">

<ul class="menu">
<li><a>Home</a></li>
<li>Products

<ul class="submenu">
<li><a>T-Shirts</a></li>
<li><a>Shirts</a></li>
<li><a>Tank Tops</a></li>
</ul>

</li>


</ul>

</div>

.submenu li{
background-color:#262626;
color:white;
}

.submenu li:hover{
background-color:white;
color:#262626;
}

Thanks in advance.

Answer 1

There's a couple of ways.

.submenu li:hover{
    background-color:white;
}
.submenu li:hover a{
    color:#262626;
}

or

.submenu li:hover{
    background-color:white;
    color:#262626;
}
.submenu li a{
    color: inherit;
}