Change style of A by passing mouse in LI

0

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>
    
asked by anonymous 28.06.2016 / 22:25

1 answer

2

On the line where you are:

.topMenu ul > li:hover {
  ...
}

Put it this way:

.topMenu ul > li:hover, .topMenu ul > li:hover a {
  ...
}
    
28.06.2016 / 22:35