How to make an element show and hide when needed?

Question

JavaScript

I need to hover over an item in one menu to bring up another menu below it. When hovering over this other menu, I want it to not disappear until I remove the cursor from this other menu. I do everything with jQuery.
Menu structure:

<!-- Основное меню -->
<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>

The problem is that when I mouseout the nav, the menu disappears when I hover over the links. When I register the same event for links - there is no way to move the cursor from one link to another, the menu disappears. I thought to try with a condition where this event would be checked for both the menu and links, but I don’t know how to write this condition correctly. I tried wrapping the second menu in a div and tracking it - didn't help. I wanted to try with coordinates - I don’t know how to compare the fact that the cursor is above or below / to the left or to the right of the given coordinates in the condition.
PS: I wrote 2 submenus in the code, all of them for each item in the main menu.

Answer 1

I found another way and settled on it - I check not when I remove the cursor from the menu, but when I hover it over a div. Everything works as it should.

Answer 2

These are not different menus. Everything needs to be combined into one menu.

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

And with the help of jQuery, when you hover over a menu item, open the submenu that is closest.