hello-world-1

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

.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 его потомок.

$('.item').on('mouseover', '.dot', function({ delegateTarget: t }) {
  $('.thumb-target', t).attr('src', this.dataset.img);
  $('.dot', t).removeClass('select').filter(this).addClass('select');
});

или

document.querySelectorAll('.item').forEach(n => {
  n.addEventListener('mouseover', onMouseOver);
});

function onMouseOver({ target: t, currentTarget: ct }) {
  const dot = t.closest('.dot');
  if (dot) {
    ct.querySelector('.thumb-target').src = dot.dataset.img;
    ct.querySelectorAll('.dot').forEach(n => {
      n.classList.toggle('select', n === dot);
    });
  }
}

document.querySelector('.nav').addEventListener('mouseover', e => {
  const data = e.target.closest('.nav-link')?.dataset;
  if (data) {
    document.querySelector('.preview-img').src = data.img;
    document.querySelector('.preview-head').textContent = data.category;
  }
});

Логика такая:

$(".btn").click(function () {
  $(this).parent().prevAll().find(".menu").removeClass("active");
  $(this).parent().nextAll().find(".menu").removeClass("active");
  $(this).next().toggleClass("active");
});

.menu.active {
  display: block;
}

Хз насколько синтаксис красив, но работает)