设置悬停区域以关闭子区域

Question

如何在屏幕的顶部或外部（绿色）外部的主（红色）链接之间设置屏幕的鼠标输出区域，以便当用户将鼠标移动到主导航的外部时，子区域会关闭吗？

document.addEventListener('DOMContentLoaded', function(){

var d = document;
var navSub = d.querySelector('.nav-sub');
var navHeader = d.querySelector('.nav-header');

function toggleDrawer(state){
  navHeader.dataset.drawerDisplay = state;
}

//ADDING THIS TOGGLE STATE ALLOWS THE USER TO CLOSE THE SUBNAV BY CLICKING IT, BUT DISABLES HOVER (NOW REQUIRES CLICKING) OF MAIN NAV TO OPEN SUBNAV. ALSO MESSING WITH MOBILE NAVIGATION.
$(".nav-header").on('click',function(){
      $(".nav-sub").slideToggle("hide");
    });

// Header nav drawer
function toggleNav(){
  var opener = d.querySelectorAll('.opener');
  [].forEach.call(opener, function(el, index) {
      el.addEventListener('mouseenter', function(){
        toggleDrawer('show');
        navHeader.dataset.drawerNum = index;
      });

      el.addEventListener('mouseout', function(){
        navSub.addEventListener('mouseenter', showDrawer('show'));
        navSub.addEventListener('mouseout', toggleDrawer('hide'));
        toggleDrawer('hide');
        navHeader.dataset.drawerNum = "";
      });
  });
}
toggleNav();