Keep submenu open when hovering submenu item

Question

I know this is a pretty basic css question but just cannot figure it out.

When I hover the top level menu item, the sub menu displays, but if I try to hover on the submenu items the submenu disappears.

See below the menu structure and my css to display the submenu

ul.sub-menu {
  position: absolute;
  left: -9999px;
  margin: 0;
  opacity: 0;
  padding: 0;
  background: #2A2A2A;
}

.menu-item:hover > ul.sub-menu  {
  left: auto;
  opacity: 1;
}

<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-109"><a href="/about">About</a>
    <ul class="sub-menu">
     <li id="menu-item-402" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-402"><a href="/news">News</a></li>
    </ul>
</li>

Answer 1

It's difficult to be absolutely certain because we don't have a complete sample of the code but the this is usually just a quick fix.

li {
  border: 1px solid red; /* for visual reference */
  display:inline-block; /* shrink wrap */
  position:relative; /* positioning context */
}
ul.sub-menu {
  position: absolute;
  left: -9999px;
  top:100%; /* directly below the list item parent */
  margin: 0;
  opacity: 0;
  padding: 0;
  background: #2A2A2A;
}
.menu-item:hover > ul.sub-menu {
  left: auto;
  opacity: 1;
}

<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-109"><a href="/about">About</a>
  <ul class="sub-menu">
    <li id="menu-item-402" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-402"><a href="/news">News</a>
    </li>
  </ul>
</li>