悬停子元素时保持父元素的悬停状态

Question

my Menu is something like this:

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

And the CSS that ads a black arrow when I hover over the TopLevel Menu

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

How do I get that arrow to stay visible, when I hover the child element of that menu item, because now as soon as I start hovering the child, the arrow from the parent item disappears.

Answer 1

Use the hover for list-item ie li:hover to achieve what you are looking for, as that will select the parent to have the hover that is visible on hover only for the child elements.

PS: Your above markup as provided is jagged and not correct. You need to correct it for the code to work properly.

Answer 2

Change

.top-bar-section .has-dropdown > a:hover:after{...}
.top-bar-section li a:hover, .top-bar-section .dropdown li a:hover{background:#c1212e;}

to

.top-bar-section .has-dropdown:hover > a:after {...}
.top-bar-section li:hover a, .top-bar-section .dropdown li:hover a{background:#c1212e;}

Note:

Closing tags are missing in your HTML markup. Which is a bad practice.

DEMO here.