I looked everywhere, couldn't find the solution.

I have a navigation menu with dropdowns,

I need the dropdown to be open on hover/mouseenter always, even the user change tabs or navigate inside dropdown menu. 

And close only on 'X' close button.

The sample code:

$('.main-nav ul > li').mouseenter(function(e){

2.         $(this).addClass('active').find('.dropdown-menu').show();
3.      }).mouseleave(function(e){
4.         $(this).removeClass('active').find('.dropdown-menu').hide();
5.         
6.     }); 
7.     
8.     $('.dropdown-menu .close').click( function(e){
9.         e.stopPropagation();
10.         $('.dropdown-menu').hide();
11.         $('.dropdown .dropdown-toggle').parent().removeClass('active');
12.         console.log('close btn!');
13.     });

How to keep dropdown open on mouseleave?

Is it any better way to do it?

The functionality should be aka Bootstrap: show dropdown on hover, keep it open when navigating through the menu items and submenus, keep dropdown showing even when open Dev tools or mouse over other elements on web page, close it only on button '.close' click or re-load the page.

Any ideas highly appreciated.