Сохранять состояние наведения родительского элемента при наведении на дочерний элемент

мое меню выглядит примерно так:

<section class="top-bar-section">
 <ul class="left">
  <li class="menu-item menu-item-main-menu menu-item-cine-suntem has-dropdown not-click" id="menu-item-60"><a href="#">TopLevel Menu</a>
   <ul class="dropdown">
    <li class="menu-item menu-item-main-menu menu-item-misiuneviziune" id="menu-item-66"><a href="#">SubLevel Menu</a></li>
   </ul>
</ul>

И CSS, который рекламирует черную стрелку при наведении курсора на меню TopLevel

.top-bar-section .has-dropdown > a:hover:after{
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: inset 5px;
        border-color: #000 transparent transparent transparent;
        border-top-style: solid;
        margin-top: 22px;
        z-index:999;
      }

Как заставить эту стрелку оставаться видимой, когда я навеваю дочерний элемент этого элемента меню, потому что теперь, как только я начинаю парить ребенка, стрелка из родительского элемента исчезает.