Reset Active Subnav using Bootstrap Data-Hover State

Question

I am using the Bootstrap data-hover plugin as linked below.

I have two levels of navigation when you mouseover each item in the navigation the sub-navigation is supposed to appear. That is working fine.

The issue I am having is that I want the sub-navigation of the active section to reappear if no other sub-navigation is showing.

I added the JS below which is making every item after the active item work correctly but every Item before the active one as well as the active one is not working correctly.

The Items before the active one are resetting to the active sub-navigation when I try to go from the Main Nav Item to it's own Sub-navigation

When I mouseout of the Main Navigation Item it does not add the open class to it causing the sub-navigation to go away.

HTML

<ul class="main-section-nav nav navbar-nav">
 <li class="dropdown">
  <a>item</a>    
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
 </li>
 <li class="dropdown active open">
  <a>item</a>    
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
 </li> 
 <li class="dropdown">
  <a>item</a>    
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
 </li>  
 <li class="dropdown">
  <a>item</a>    
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
 </li>
</ul>

JS

   $(document).ready(function() {
    $('.main-section-nav > li').mouseout(function(){
      $('.active').addClass('open');
    });
   });

https://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/

Answer 1

Just use .mouseleave instead

$('.main-section-nav > li').mouseleave(function(){
  $('.active').addClass('open');
});

jsFiddle: https://jsfiddle.net/CSS_Apprentice/xadrbp7m/2/

According to w3schools :

The mouseout event triggers when the mouse pointer leaves any child elements as well the selected element.

The mouseleave event is only triggered when the mouse pointer leaves the selected element.

Answer 2

Bad HTML issue

This:

<ul class="class="main-section-nav nav navbar-nav>

Should Be This:

<ul class="main-section-nav nav navbar-nav">