My objective is to create a simple mouseover effect on my menu that remains active while the mouse is in a submenu, and triggers the close() function when the mouse leaves the main tab or the submenu.
I understand that an event handler is required to trigger the close() function, and I would greatly appreciate any advice or assistance on this matter.
Currently, the jQuery script rewrites the parent class 'cbp-hrclosed' to 'cpb-hropen'.
For reference, here is an example of what I am trying to accomplish: http://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/
The jQuery
var cbpHorizontalMenu = (function() {
var hover = 1;
var $listItems = $( '#cbp-hrmenu > ul > li' ),
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;
function init() {
$menuItems.on( 'click', open );
$listItems.on( 'click', function( event ) { event.stopPropagation();
hover=1;
} );
}
// Rest of the jQuery script goes here...
})();HTML
<?php echo 'HTML code here'; ?>CSS
/* CSS code goes here... */