Держите подменю открытым при наведении курсора на элемент подменю

Я знаю, что это довольно простой вопрос 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">
    	<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>


menu css hover visible
person jon1010    schedule 19.06.2015    source источник
comment
Вы можете имитировать этот Образец меню < / а>   -  person jameshwart lopez    schedule 19.06.2015

Ответы (1)


arrow_upward
-1
arrow_downward

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

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>

person Paulie_D    schedule 19.06.2015