Как сменить цвет ссылки пункта верхнего меню при наведении на подменю?

Question

[HOPMNC EVER]

Есть такая верстка:

<ul class="top-level">
    <li class="top-item"><a href="#">Верхний пункт меню</a>
      <div class="sub-item-wrap">
        <ul class="sub-menu">
          <li><a href="#">Пункт 1</a></li>
          <li><a href="#">Пункт 2</a></li>
          <li><a href="#">Пункт 3</a></li>
        </ul>
      </div>
    </li>
  </ul>

К примеру, у нас ссылка li.top-item > a в обычном состоянии чёрная, вешаем на нее hover и меняем цвет на красный.
Нужно сделать, чтобы при наведении на .sub-item-wrap ссылка li.top-item > a не "сбрасывала" свой hover и оставалась красной. Соответственно, когда мы покидаем блок .sub-item-wrap ссылка становится черной.

Answer 1

[0xD34F]

ul a {
  color: black;
}

ul li:hover > a {
  color: red;
}

https://jsfiddle.net/pbw5L1eq/