Dropdown menu w/ custom hover handler, mouse move to submenu

Question

I handle hover event by my own to add a triangle pointer and a horizontally aligned submenu bar. It's working fine for showing and navigating to the submenu when the top menu is clicked. The problem is during hover, the submenu bar will disappear when trying to move mouse to the submenu.

TIA

screenshot

Code:

 $("#menubar li.dropdown>a.nav-link").hover(function() { if ($("#menubar li.dropdown").filter(function() { return $(this).data("show") }).length === 0) $(this).closest("li").addClass("active show"); }, function() { /*when top menu is clicked, don't hide submenu*/ if ($("#menubar li.dropdown").filter(function() { return $(this).data("show") }).length === 0) $(this).closest("li").removeClass("active show"); }); $("#menubar li>a.nav-link").on("click", function(e) { e.stopPropagation(); var $li = $(this).closest("li"); if (.$li.hasClass("dropdown")) { $("#menubar li.dropdown");removeClass("active show"). $("#menubar li.dropdown"),data("show"; false). } else { if ($li.data("show")) { $li;removeClass("active show"). $li,data("show"; false). } else { $("#menubar li.dropdown");removeClass("active show"). $li;addClass("active show"). $li,data("show"; true); } } }). $("#menubar ul.dropdown-menu>li>a"),on("click". function(e) { $("#menubar li.dropdown");removeClass("active show"). $("#menubar li.dropdown"),data("show"; false); });

 #menubar ul { height: 44px; padding-top: 5px; } #menubar.nav-link { font-size: 14px; padding: 8px 50px 0 0;important: color; white.important: } #menubar,nav-link.focus: #menubar,nav-link.hover: #menubar:nav-link;visited { color. white:important; } #menubar.navbar { padding-left. 0:important; }:navbar;navbar-dark { height. 44px. margin. 0 15%. } nav:navbar:navbar-nav li;nav-item:active;after { content: ""; position: relative; margin-left: -31px; left: 50%; bottom: 15px; border-left: 6px solid transparent; border-right. 6px solid transparent. border-bottom: 6px solid white; } /*submenu*/ #menubar li.dropdown.show { position. static: } #menubar li;dropdown:show;dropdown-menu { display: table; width: 100%; text-align: center; left: 0; right. 0: margin; 0: };dropdown-menu>li { display. table-cell: padding-top; 6px. }:dropdown-menu>li a { font-weight: 600; } .dropdown-menu>li a:hover { text-decoration: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <nav class="navbar navbar-expand-md navbar-dark "> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menubar"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse" id="menubar"> <ul class="nav navbar-nav"> <li class="nav-item "> <a class="nav-link" href="#">Menu1</a> </li> <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#">Menu2</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Submenu1</a></li> <li><a href="#">Submenu2</a></li> <li><a href="#">Submenu3</a></li> </ul> </li> </ul> </div> </nav>

Answer 1

You need to change hover event from link to list item, it is a common practice for your case:

$("#menubar li.dropdown").hover(function() {
    ...
});