Question

I have a small problem in my code, and im not sure how to solve it.

Here is a Fiddle with detailed comments: http://jsfiddle.net/4aZbp/

Basically, I have a list of elements, when you hover each element there’s a “+” icons that shows.

When you click on that button, a little menu appears.

That menu is NOT inside the li, it’s a absolute hidden menu at the top of the page that Im positionning with jQuery. So, one menu for all the elements.

That menu should stay open until the user mouseleave the <li>. So far, so good,

My problem is that it needs to remain open when the user try to click INSIDE that menu. I can’t get that to work, cause the menu is outside the div and it needs to remain there.

Any solution? Please check the Fiddle

http://jsfiddle.net/4aZbp/

$(document).ready( function() {

    // Position the menu & show it at the right place when you click on the "+" button

    $(".open-playlist-link").click(function() {       
        var offset = $(this).offset();
        var offsetTop = Math.round(offset.top);
        var offsetLeft = Math.round(offset.left);

        var menu = $('.add-to-playlist-menu');

        menu.css( {
            top : offsetTop +20,
            left : offsetLeft }
        );
        menu.toggleClass('display-none');      
    });

    // Hide the "+" button when you leave the wrapper of the <li> 

    $(".wrap").mouseenter(function() {
            $(this).children('.add-to-playlist-icon').removeClass('display-none');
        }).mouseleave(function(){
            $(this).children('.add-to-playlist-icon').addClass('display-none');
    });

    // Hide the menu when you leave the wrapper, but you need to be able to click the link inside the menu. When you leave the menu, we hide it. ISSUE HERE.

    $('.wrap').mouseleave(function(){
        $('.add-to-playlist-menu').addClass('display-none');
    });
});​

Answer 1

Suppose the easiest way to make it work like you want will be to move menu insed an li.

Here is not completely finished demo, but it should be easy enough to add required behavior (like hidding menu after LI is left)

Main update is here (new line $(this).parent().append(menu); and removed css positioning):

  $(".open-playlist-link").click(function() {       
        var offset = $(this).offset();
        var offsetTop = Math.round(offset.top);
        var offsetLeft = Math.round(offset.left);

        var menu = $('.add-to-playlist-menu');    

        menu.toggleClass('display-none');      
        $(this).parent().append(menu);
    });

As menu div is not inside LI – that event happens any time you move your mouse to menu div. To avoid this you should have menu div inside LI (actually, div.wrap according to provided code).