Currently, I have set up a navigation bar with a sub-menu that spans the full width of the page. When hovering over the list items, the sub-menu appears as expected. However, when moving the mouse down into the sub-menu, it disappears instantly. The objective is to keep the sub-menu visible even when hovering over it, allowing users to click on the links within it.
To achieve this functionality, I have implemented jQuery code for displaying and hiding sub-menus when hovering over "men", "women", and "youth". Here is the snippet of jQuery code:
$('#men').hover(function(){
$('#men_submenu').stop(true, false).slideDown('400');
}, function(){
$('#men_submenu').stop(true, false).slideUp('400');
});
$('#women').hover(function(){
$('#women_submenu').stop(true, false).slideDown('400');
}, function(){
$('#women_submenu').stop(true, false).slideUp('400');
});
$('#youth').hover(function(){
$('#youth_submenu').stop(true, false).slideDown('400');
}, function(){
$('#youth_submenu').stop(true, false).slideUp('400');
});
If you would like to see the live example, check out the JSFIDDLE link here: http://jsfiddle.net/RBlair/rLdtse86/10/
Thank you!