How to Get Multiple elements to change color on hover CSS?

I would like multiple elements of a certain item to change color when the user hovers over the text. Please view my site ( and hover over the "more" menu item. As you can see, only the more text changes colors to white when you hover over it, but the menu icon does not. Please view my source code and maybe give me a solution to my problem. I want to have it so that when the user hovers over the <li> that contains the more <a> and the more icon <span> then they will both change colors to white. Any help is appreciated. Thanks.

Also if possible, can I make it so that after the user hovers over it, and moves down to the menu below the element, make it remain white until the user leaves the menu? (Sorry if my wording is tricky)


<li class="MoreMenuContainer"><a href="#" class="MoreHyperlink">More <span class="MoreMenu"></span></a>


.MoreMenu {

text-decoration: none; 

font-size: 8px;

color: gray;

margin-top: 1px;

-webkit-text-stroke: 0.35px;

font-family: 'icomoon';

speak: none;

font-style: normal;

font-weight: 100;

font-variant: normal;

text-transform: none;

text-decoration: none;

-webkit-transition: color 0.3s ease;

-moz-transition: color 0.3s ease;

-ms-transition: color 0.3s ease;

transition: color 0.3s ease;


.MoreMenu:before {

content: "\e6b8";



this maybe?

li:hover span, li:hover a {

Need Your Help

Creating a list that contains lambda

c# lambda expression-trees

In C#, how to create a list that can contains lambda?

Controlling excel formula exists in multiple worksheets from one sheet

excel excel-formula excel-2010

I have multiple worksheets having same format but different data. Each has same formula at the same position in each worksheet.