Mouseover on either selector to make a div appear

Vote count:

0

I'm making a 2 level menu. The first level width is maxed at 500px. I want to make the 2nd level full width, so I use jquery to clone the list to another div. However, now I can't make the other div stay appear when I mouseover.

You can see the jsfiddle at http://ift.tt/1xCwuiE

I tried adding hover inside the mouseleave so that when it leaves the first menu, it will stay appear but it doesn't work.

    $(".nav li a").on({
        mouseenter: function () {
            $(this).siblings("ul").clone().appendTo("#secondary-menu");
            $(this).addClass("active");
        },
        mouseleave: function () {
            $('.nav li a, #secondary-menu').hover(function(){  
                $('#secondary-menu').addClass("show");  
            },     
            function(){    
                $('#secondary-menu').html("");
                $('.nav li a').removeClass("active");
            });
        }
    });

asked 4 mins ago

framelita

11

Mouseover on either selector to make a div appear