Using jqueryUI’s blur and focus to hide on mouseout

As you probably already know, jquery UI triggers an focus and blur event for each element of the menu so it’s a bit tricky to hide the hole menu for example when the mouse hovers out. Still there’s a workaround:

                        $('.menu_dropdown').click(function() {
		    	    var self = this;
		    	    var test_timer = null;
	    		    $(this).next('ul').menu({ 
		    		    position: { my: "left top", at: "right-5 top+5" },
		    		    create: function( event, ui ) { $(this).position({my: "left top", at: "left bottom", of: $(self)}); },
		    		    select: function( event, ui) { $(this).menu('destroy'); $(this).css('display',''); $.removeData(this,'uiMenu'); },
		    		    blur: function(event, ui) {  test_timer = setInterval(function() { $(self).next('ul').menu('destroy'); $(self).next('ul').css('display',''); $.removeData($(self).next('ul'),'uiMenu'); clearInterval(test_timer); }, 500); },
		    		    focus: function(event, ui) { clearInterval(test_timer); }
		    		});
	    	   });

or you can use the hiding method presented here.