Get menu children active on hover

Question

Im new in javascript and Jquery, i get this code and i change the onclick by hover, somehow when im hovering the menu element the submenu are active, but as soon as I remove the mouse over the menu item the dispariat submenu and I cannot select it I would like the submenu to be active and selectable when I hover the menu item

$(function() {
// enable styling for jquery
  $('#mainNav').addClass('js-menu');

// close dropdown function
  function closeDropdown() {
    // $(this).children().find(".children").show();
        $('li.dropdown.open').removeClass('open').find('> ul').hide();
        $('#mainNav').css('padding-bottom','0');
    }
// initialise timeout
    var timeoutSession;
// mobile menu collapse
    $( "#toggle-menu" ).mouseover(function() {
    $(this).toggleClass('on');
        $('#menu').slideToggle();
    });


// main menu
    $('.dropdown > a').mouseover(function(e) {
        e.preventDefault();
        e.stopPropagation();
    if($(this).parent().hasClass('open') === false){ // if not open
      clearTimeout(timeoutSession);
      var menHt = $(this).parent().find('> ul').height();
      $('#menu > li').removeClass('open').find('> ul').hide();
      $('#mainNav').css('padding-bottom',menHt);
      $(this).parent().addClass('open').find('> ul').fadeIn();
      timeoutSession = setTimeout(closeDropdown, 10000);
      $(document).on("mouseover", function() {
        closeDropdown();
      });
    } else { // close menu
      clearTimeout(timeoutSession);
      $(this).parent().removeClass('open').find('> ul').hide();
      $('#mainNav').css('padding-bottom','0');
    }
    });


});

#mainNav {
  transition: padding-bottom 0.9s;
}

@media (max-width: 1300px) {
  #mainNav {
    padding-bottom: 0 !important;
  }
}
@media all and (min-width: 1300px) {
  #mainNav.js-menu #menu {
    display: block !important;
  }
}
#menu {
  padding: 0;
  list-style: none;
  margin: 0;
  margin-bottom: 1rem;
}

#menu li {
  display: inline;
}

@media all and (min-width: 1300px) {
  #menu {
    font-size: 0;
  }

  #menu li {
    display: inline-block;
    font-size: 1rem;
  }
}
#menu ul {
  background: #fff;
  display: none;
  padding: 0;
  text-align: center;
}

#menu > li > ul > li {
  margin-bottom: 0.5rem;
}

#menu li.open ul {
  display: block;
}

@media all and (min-width: 1300px) {
  #menu {
    position: relative;
  }

  #menu > li > ul {
    position: absolute;
    width: 100%;
  }

  #menu ul li {
    display: block;
    text-align: center;
  }
}

#menu > li > a:hover,
#menu > li > a.nav-path-selected {
  border-bottom: none;
 
}



#menu ul a,
#menu ul a:link,
#menu ul a:visited {
  color: #4C4D4E;
  font-size: 0.8rem;
  font-weight: 800;
}

@media all and (min-width: 1300px) {
  #menu > li > ul {
    -moz-columns: auto 190px;
         columns: auto 190px;
  }

  #menu ul li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav_item" id="mainNav">
    <ul class="menu_header" id="menu">
        <li class="dropdown">
            <a class="nav_li" href="index.html">Menu</a>
            <ul class="sub-menu">
                <li>
                    <a class="nav_li" href="#">Submenu</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Answer 1

The mouseover function contains only the specified element. If you want to access all items underneath, you must use the hover function. If you change the function with these codes, the problem will be fixed.

// main menu
    $('.dropdown').hover(function(e) {
        $(this).addClass('open').find('> ul').show();
    },function (){
        $(this).removeClass('open').find('> ul').hide();
    });

If you want this submenu to be animated, you can add a class for the relevant menu and give it an effect.

    // main menu
            $('.dropdown').hover(function(e) {
                $(this).addClass('open').find('> ul').addClass("active");
            },function (){
                $(this).removeClass('open').find('> ul').removeClass("active");
            });

ul{
  transition:all.3s ease;
  opacity:0;
  visibility:hidden;
}

ul.active{
    opacity:1;
  visibility:visible;
}