JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.flowtrend.net/templates/flowtrend/js/hoverintent.js"></script>
<span class="item-134">
    <a href="#">Products</a>
</span>

<div id="banner-top" class="hidden">Hidden Div</div>

CSS

.hidden {
    display: none;
}

JavaScript

jQuery(".item-134 a, #banner-top").mouseenter(function () { //if mouse is over 'products' link or submenu
    //clear timeout
    clearTimeout(jQuery(this).data('timeoutId'));
    //display sub menu
    jQuery('#banner-top').removeClass('hidden');
}).mouseleave(function () { //when mouse leaves element
    timeoutId = setTimeout(function () {
        //delay hiding sub menu
        jQuery('#banner-top').addClass('hidden');
    }, 650);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    jQuery(".item-134 a, #banner-top").data('timeoutId', timeoutId);
});