Question

I am trying to create a menu where when you click anywhere else on the page the div will be hidden. This works in everything but firefox. In firefox, when you click on one of the links within the section it will not go to the link, it just closes the div.

code:

$(document).mouseup(function(e){//removes menu when clicked on any other part of page
    if($(".menuone:visible").length > 0  ){
        $('.menuone').hide();
    }
});

HTML:

<div class="menuone">
<div class="col1">
<ul><li>Example link</li></ul>
</div>
</div>

Answer 1

You should set up a variable that can keep track of the hover state of the .menuone div.

Then your if statement will be:

if($(".menuone:visible").length > 0 && !menuHover )

That should do the trick.

Hope it helps 🙂

edit:

var menuHover = false;

$(".menuone").bind('mouseenter mouseleave',function(e){
    menuHover = e.type == 'mouseenter';
});