I have a structure where a is inside li , I applied a hover effect on li for when you mouse over, change the colors. What happens is that you are only changing background-color and not color in a .
I would like color: #FCC12A;
to be applied as well
.topMenu {
height: 90px;
background-color: #FCC12A;
}
.topMenu ul > li {
float: left;
padding-right: 10px;
padding-left: 10px;
}
.topMenu ul > li > a {
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
color: #111111;
font-weight: 900;
text-transform: uppercase;
font-size: 13px;
line-height: 90px;
}
.topMenu ul > li:hover {
background: #111111;
color: #FCC12A;
}
<div class="topMenu">
<div class="mainContent">
<div class="grid_340 float-left">
<img class="padding-9" src="logo.png" />
</div>
<div class="grid_620 float-right">
<ul class="float-right">
<li class="madmaxmenu">
<a href="#mad-max">Mad Max</a>
</li>
<li class="theroadwarriormenu">
<a href="#the-road-warrior">The Road Warrior</li>
</a>
<li class="beyondthethunderdomemenu">
<a href="#beyond-the-thunderdome">Beyond The Thunderdome</a>
</li>
<li class="furyroadmenu">
<a href="#fury-road">Fury Road</a>
</li>
</ul>
</div>
</div>
</div>