Приветствую!
Убрать
.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 его потомок.