It would probably be easiest to maintain a small self-invoking function to manage this so it doesn't impact any other scripts.
All we're doing is binding mouseover events to the items we want to reveal the dropdown list to, and when we mouseout, we're giving the user 500ms (change the time
(function($){
// Select the items you want to bind our mouse events to.
var $hoverItems = $("#header-nav .header-nav-item, #header-nav-dropdown");
// Dropdown list.
var $dropdownList = $("#header-nav-dropdown");
// This is a timeout variable so we can keep track of our mouse incomings/outgoings.
var timeout;
// Bind mouseover/mouseout events.
$hoverItems.on("mouseover", function(){
$dropdownList.show();
clearTimeout(timeout);
}).on("mouseout", function(){
timeout = setTimeout(function(){
$dropdownList.hide();
}, 500);
});
})(jQuery);