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

Question

[Para_Lapok]

Мне нужно, чтобы при наведении на пункт одного меню появлялось другое меню под ним. При наведении на это другое меню нужно, чтобы оно не исчезало, пока я не уберу курсор с этого другого меню. Делаю всё при помощи jQuery.
Строение меню:

<!-- Основное меню -->
<nav class="main_menu">
  <input type="checkbox" name="menu" id="btn-menu" />
  <label for="btn-menu"><img src="https://img.icons8.com/ios/50/000000/menu--v1.png" width="30"></label>
  <ul>
    <li class=" zero_li">
      <a href="https://sigma.irksite.ru/"><img src="/upload/landing/955/Bezymyannyy_1x_1x.png" class="logo" width="70" style="margin-bottom: 0px;"></a>
    </li>
    <li class="one_li">
      <a href="https://sigma.irksite.ru/okompanii/" id="company">Компания</a>
    </li>
    <li class="two_li">
      <a href="https://sigma.irksite.ru/proekty/" id="projects">Проекты</a>
    </li>
    <li class="three_li">
      <a href="https://sigma.irksite.ru/pustayastranitsa/" id="investors">Инвесторам</a>
    </li>
    <li class="four_li">
      <a href="https://sigma.irksite.ru/sotsialnayaotvetstvennost/" id="responsibility">Ответственность</a>
    </li>
    <li class="five_li">
      <a href="https://sigma.irksite.ru/press-center/" id="press-center">Пресс-центр</a>
    </li>
    <li class="six_li">
      <a href="https://sigma.irksite.ru/for-partners/" id="partners">Партнёрам</a>
    </li>
    <li class="seven_li">
      <a href="https://sigma.irksite.ru/kontakty/" id="kontacts">Контакты</a>
    </li>
  </ul>
</nav>
<!-- 1-е подменю -->
<nav class="company">
  <ul class="nav">
    <li class="nav-item">
      <a class="under_menu" href="https://sigma.irksite.ru/okompanii/#block347">История</a>
    </li>
    <li class="nav-item">
      <a class="under_menu" href="https://sigma.irksite.ru/okompanii/#block363">Структура</a>
    </li>
    <li class="nav-item">
      <a class="under_menu" href="https://sigma.irksite.ru/okompanii/#block371">Совет директоров</a>
    </li>
    <li class="nav-item">
      <a class="under_menu" href="https://sigma.irksite.ru/okompanii/#block654">Менеджмент</a>
    </li>
  </ul>
</nav>
<!-- 2-е подменю -->
<nav class="projects">
  <ul class="nav">
    <li class="nav-item">
      <a class="under_menu" href="https://sigma.irksite.ru/pustayastranitsa3/">Геология и запасы</a>
    </li>
    <li class="nav-item">
      <a class="under_menu" href="https://sigma.irksite.ru/pustayastranitsa5/">Горные работы</a>
    </li>
    <li class="nav-item">
      <a class="under_menu" href="https://sigma.irksite.ru/pustayastranitsa6/">Обогащение</a>
    </li>
    <li class="nav-item">
      <a class="under_menu" href="https://sigma.irksite.ru/pustayastranitsa7/">Программа развития</a>
    </li>
  </ul>
</nav>

Проблема в том, что когда я прописываю mouseout для nav - меню исчезает когда я навожу курсор на ссылки. Когда прописываю это же событие для ссылок - нет возможности перевести курсор с одной ссылки на другую, меню исчезает. Думала попробовать условием, где проверялось бы это событие и для меню и для ссылок, но не знаю как правильно прописать это условие. Пробовала обернуть второе меню в div и его отслеживать - не помогло. Хотела попробовать с координатами - не знаю как в условии сравнить то, что курсор выше или ниже/левее или правее заданных координатов.
P.S.: прописала в коде 2 подменю, всего их для каждого пункта в основном меню.

Answer 1

[Para_Lapok]

Нашла ещё один способ и остановилась на нём - проверяю ни когда курсор уберу с меню, а когда наведу его на div. Всё работает как надо.

Answer 2

[Evgeniy]

Это не разные меню. Все нужно соединить в одно меню.

<ul>
  <li>
   Menu
  </li>
  <ul>
     <li>
         Podmenu
      </li>
  </ul>
</ul>

А с помощью jQuery задать при наведении на пункт меню открыть то подменю которое находится ближе всех.

Comments

[Para_Lapok]

Если так делать, то оно выглядит не так, как нужно.