Change A style when hovering LI

Question

I have a structure in which the to is inside the li, applied an effect of Hover in li when you move the mouse over, change the colors. What happens is that you are only changing the background-color and not the color in to.

I would like the color: #FCC12A; also be applied

.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>

Answer 1

On the line where:

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

Put it that way:

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