How can I make it so that when you hover the mouse over the child elements of the menu, it does not disappear?

Question

Android

I have the following menu

<a id="subcategories" class="category avtomobili" href="#" onmouseout="closeSubcategories()" onmouseover="showSubcategories()">Автомобили</a> <span>(0)</span>
                                     </h1>

                                    <div style="display: none" id="subcategories_list">
                       <ul>
                                                      <li>
                                                              <a class="category sub-category legkovye-avtomobili" href="#">Легковые автомобили</a> <span>(0)</span>
                                                          </li>
                                                      <li>
                                                              <a class="category sub-category gryzoviki-avtobysy-spectexnika" href="#">Грузовики. Автобусы. Спецтехника</a> <span>(0)</span>
                                                          </li>
                                                      <li>
                                                              <a class="category sub-category avtozapchasti-i-prinadlezhnosti" href="#">Автозапчасти и принадлежности</a> <span>(0)</span>
                                                          </li>
<ul></div>
<script type="text/javascript">
            function showSubcategories() {
                    $("#subcategories_list").attr("style","display:inline");
            }
            function closeSubcategories() {
                    $("#subcategories_list").attr("style","display:none");
            }

        </script>

when hovering over id=subcategories a submenu appears, when leaving the link it disappears, how can I make it so that when the mouse is within the submenu it does not disappear?

Answer 1

<div id="cars" onmouseout="closeSubcategories()" onmouseover="showSubcategories()">
  <a id="subcategories" class="category avtomobili" href="#">Автомобили</a> <span>(0)</span>

  <div style="display: none" id="subcategories_list">
    <ul>
      <li>
        <a class="category sub-category legkovye-avtomobili" href="#">Легковые автомобили</a> <span>(0)</span>
      </li>
      <li>
        <a class="category sub-category gryzoviki-avtobysy-spectexnika" href="#">Грузовики. Автобусы. Спецтехника</a>
        <span>(0)</span>
      </li>
      <li>
        <a class="category sub-category avtozapchasti-i-prinadlezhnosti" href="#">Автозапчасти и принадлежности</a>
        <span>(0)</span>
      </li>
    </ul>
  </div>
</div>

function showSubcategories() {
  $("#subcategories_list").attr("style","display:inline");
}

function closeSubcategories() {
  $("#subcategories_list").attr("style","display:none");
}