Change background-color of mouse-over row

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*/
}