jQuery dropdown issue (submenu doesn't stay visible)

I'm using Jquery to display a dropdown menu when the mouse hover over navigation links, it's working although the submenu doesn't stay visible when the mouse hover over it, I think the issue is that I'm not nesting my submenu inside the navigation. And that's on purpose. Here's my jquery code with hoverIntent implemented (used to control sensitivity of hover):

The missing part is keeping the submenu visibile until the user clicks anywhere on the body tag or on another navigation link, but not on the submenu of the current navigation link.

A codepen is well commented and available: http://ift.tt/2kGvVnO

jQuery(document).ready(function($) {
var config = {   
     sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)   
     interval: 100,  // number = milliseconds for onMouseOver polling interval   
     over: doOpen,   // function = onMouseOver callback (REQUIRED)   
     timeout: 0,   // number = milliseconds delay before onMouseOut   
     out: doClose    // function = onMouseOut callback (REQUIRED)   
};

function doOpen() {
    $(this).removeClass('PopupClosed').addClass('PopupOpen');
    var cls = $(this).data('target'); // fetch which class to target.
    $('.Menu.' + cls).css('display','block'); // will make display block
}

function doClose() {
    $(this).addClass('PopupClosed').removeClass('PopupOpen');
    var cls = $(this).data('target'); // fetch which class to target.
    $('.Menu.' + cls).css('display','none'); // will make display none
}

$(".navTab.Popup").hoverIntent(config);
});