Question

I built a dropdown menu using a script posted by another stack user, but now im having trouble keeping it visible when i mouse over it.
Here is the website:

http://79.24.150.216/

And you can try hovering “INFO” and then try and hover the menu that displays, and you will see it wont stay visible.

You can find the css at:

http://79.24.150.216/css/main.css

And this is the js snippet used:

$('nav li').on('mouseenter mouseleave hover',function( e ){
$('#'+$(this).data('open'))[e.type=='mouseenter'?'slideDown':'slideUp'](); });

Thank you in advance for your precious help.

Answer 1

Try this solution.

$(document).ready(function(){
    $('nav li').on('mouseenter click hover',function( e ){
        var value = $(this).attr('data-open');
        $('#'+value).slideDown();     
    });

    $('#subnav ul li').on('mouseleave', function(e){
        var menu = $(this).parent().parent().parent().attr('id');
        $('#'+menu).slideUp();
    });
});

hope it helps.

Suggestion: You can defined the submenu with info-submenu so you can dynamically get the right div to load over top menus.