Change background-color of mouse-over row - html

Question

Once we mouse-over on "currency", we can see drop down as below:
what I need is once we mouse-over on particular currency[ row], it should show different background color like below.
<style type="text/css">
.menuBackground {
background: brown;
text-align: center;
}
.dropDownMenu a {
color: #FFF;
}
.dropDownMenu,
.dropDownMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.dropDownMenu li {
position: relative;
}
.dropDownMenu a {
padding: 10px 20px;
display: block;
text-decoration: none;
}
.dropDownMenu a:first-child {
color: #000;
}
.dropDownMenu > li {
display: inline-block;
vertical-align: top;
margin-left: -4px; /* solve the 4 pixels spacing between list-items */
}
.dropDownMenu > li:first-child {
margin-left: 0;
}
.dropDownMenu ul {
box-shadow: 2px 2px 15px 0 rgba(0,0,0, 0.5);
}
.dropDownMenu > li > ul {
text-align: left;
display: none;
background: green;
position: absolute;
top: 100%;
left: 0;
width: 240px;
z-index: 999999;
}
</style>
How?

Answer 1

its good to add colors on anchor tag not to li because you have already styled color on anchor, So just add hover css on anchor you will see what you want.
.dropDownMenu li a:hover {
background: #fff; /*Your color*/
color: #000; /*Your color*/
}

Answer 2

When you want to do is give style on ul li then consider as parent > child. So what you need is to change the background color and color on hover of li.
.dropDownMenu a:hover {
color: #000;
background: #fff;
}
What i did is, i give css on hover of your dropdown menu. You can do it for more child according to > selector.

Answer 3

Try this, on particular row hover effect as below:
And change background-color for currency li hover green to white.
.dropDownMenu > li > ul {
background: white none repeat scroll 0 0;
display: block !important;
left: 0;
position: absolute;
text-align: left;
top: 100%;
width: 240px;
z-index: 999999;
}
ul.dropDownMenu li ul li:hover {
background-color: green;
}

Answer 4

Just add following css will make like your expected output.
#select-language ul li:hover
{
background-color:white
}