JavaScript Submenu Not Persisting -

i'm creating additional tab on menu dynamically (let's call new tab, watch), , going pretty including submenu showed once new tab hovered over. looked @ articles on event bubbling , took @ other examples, couldn't find solution issue.

whenever hover on watch, submenu appears, when try hover watch submenu, submenu disappears. need submenu persist when user hovers on watch or submenu, , submenu should disappear once user hovers out of either. note, cannot use css solution. i've attached current code below comments:

//prepend first child var prependchild = function(parent, newfirstchild) {     parent.insertbefore(newfirstchild, parent.firstchild) }  //declaring vars var navmenu               = document.getelementsbyclassname('navglobal-list')[0];     categoryexplorer      = document.getelementsbyclassname('categoryexplorer')[0];  //creating new tab var exploretab            = document.createelement('li');     exploretab.classname  = 'navglobal-category';  //creating new search form var searchhtml = ['<div class="searchprogram searchprogram--categoryexplorer">',                         '<div class="searchprogram-container">',                             '<input type="search" class="form-control form-control--light form-control--searchprogram" placeholder="search programs" value="">',                         '</div>',                     '</div>'].join('');  //creating new watch category explorer content       var watchcategoryexplorercontent = document.createelement('div');     watchcategoryexplorercontent.classname = 'categoryexplorer-content target-watch-content';     watchcategoryexplorercontent.innerhtml = searchhtml;     prependchild(categoryexplorer, watchcategoryexplorercontent)  var watchlink = document.createelement('a');         watchlink.setattribute('href','/watch');     watchlink.innerhtml = 'watch'.touppercase();      exploretab.appendchild(watchlink); navmenu.appendchild(exploretab); //added 'watch' navigation  //change classes on hover exploretab.addeventlistener("mouseover", function() {      exploretab.classname = 'navglobal-category navglobal-category--open';     categoryexplorer.classname = 'categoryexplorer categoryexplorer--open';      watchcategoryexplorercontent.classname = 'categoryexplorer-content categoryexplorer-content--open target-watch-content'; }, false);  exploretab.addeventlistener("mouseleave", function() {      exploretab.classname = 'navglobal-category';     categoryexplorer.classname = 'categoryexplorer';     watchcategoryexplorercontent.classname = 'categoryexplorer-content target-watch-content'; }, false); 

a potential (layout-dependent) way keep menu open make child of tab - way, provided there no space between tab , hover menu, can hover 1 other without creating mouseleave event on tab.

another solution not layout-dependent add delay between initial mouseleave event , submenu closing. i've done using jquery before, same thing should possible without it.

$('.navglobal-category').mouseleave(function(){    settimeout(     function(){        if(!ishovered($('.navglobal-category')[0])){         exploretab.classname = 'navglobal-category';         categoryexplorer.classname = 'categoryexplorer';         watchcategoryexplorercontent.classname = 'categoryexplorer-content target-watch-content';        }     }, 200); });  function ishovered(e){     return ((e.parentnode.queryselector(":hover") ||      e.queryselector(":hover")) === e); } 

credit zb' ishovered solution: https://stackoverflow.com/a/14800287/5403341