Сохранять подменю при вводе подменю item

Question

Я знаю, что это довольно простой вопрос css, но просто не могу понять это.

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

Ниже структуры меню и мой CSS для отображения подменю

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"> 
 
    \t <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

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

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>