Question: I am using the jQuery UI Menu as a context menu, so when a user clicks on a cell in a table, it brings it up with relevant options. The problem is, it wasn't really designed to be used like this, so it doesn't hide when the user clicks outside of the menu.

I tried using the blur method:

```
$("#menu").menu({
    blur: function( event, ui ) {
        $("#menu").css('top', '-1000px');
        $("#menu").css('left', '-1000px');
    }
});

```

For some reason though, the menu hides even if you scroll onto one of the options in the menu.

Is there a simple solution for this? 

**Edit:**
To pull up the menu I use:

```
$("table.adminScheduleViewer tr td:nth-child(4), table.adminScheduleViewer tr td:nth-child(5), table.adminScheduleViewer tr td:nth-child(6), table.adminScheduleViewer tr td:nth-child(7), table.adminScheduleViewer tr td:nth-child(8), table.adminScheduleViewer tr td:nth-child(9), table.adminScheduleViewer tr td:nth-child(10)").click(function(event){
    $("#menu").css('top', event.pageY);
    $("#menu").css('left', event.pageX);
});

```

That always seems to get called first if I try to use a $('body').click() to hide it. Can you change the order jQuery handles clicks?

Answer: 
```
 $('body:not(#menu)').click(function(){
     $("#menu").css({ 'top' : '-1000px', 'left' : '-1000px' });
 });

```

I think this way is a little sexier
I'm using this to hide my jquery-ui menu when the user clicks outside of the menu.

```
$('body:not(#menu)')
.off('click')
.on( 'click', function() {
    $('body:not(#menu)')
    .off('click');
    $('#menu')
    .hide();
});

```

Similar to the above answer but hides the menu elements instead of moving them out of the viewport. Also disables the click handle after it is invoked once to leave other click functionality in place.