Как исправить исчезновение выпадающего меню при наведение?

Question

[hello-world-1]

Здравствуйте. Есть проблема с отображение выпадающего меню. При наведение на элемент «Меню», открывает подменю, которое закрывается, когда курсор покидает элемент «Меню». Как это исправить?

Прикладываю пример - https://jsfiddle.net/nqzf50wo/1/

Answer 1

[MikUrrey]

Приветствую!
Убрать

.nav-head:hover ~ .nav-submenu {
  display: block
}

и вместо него прописать

.nav-item:hover .nav-submenu {
  display: block
}

https://jsfiddle.net/puwkmv20/

С таким селектором .nav-head:hover ~ .nav-submenu, когда вы уводите курсор на .nav-submenu, .nav-item больше не :hover, и поэтому .nav-submenu больше не display: block (скрывается).

С .nav-item:hover .nav-submenu, уводя курсор на .nav-submenu, мы всё еще держим :hover на .nav-item, потому что .nav-submenu его потомок.