title: jQuery-ui menu submenu not collapsing on mouseout
body: <p>I'm playing around with the Jquery-ui menu widget and I'm trying to get some functionality that seems like it should be REALLY obvious... but I might be overlooking it, or maybe they did when they wrote it.</p>
  
  <p>I was able to get the menu horizontal easily enough, and make the submenu come down vertically... but, for the life of me, I can't get the submenu to collapse when I mouseout of the menu. It just stays there until I click something else. REALLY annoying. As a designer, it goes against all of my sensibilities and I can't see a reason for it to do just hang there.</p>
  
  <p>Did I break the thing, or do I need to add something special?
  As a side note, I've been fiddling with the Jquery-ui js for a couple hours, editing the menu widget. I tinkered around here:</p>
  
  <pre><code>// DEFAULT FUNCTION:
      // Clicks outside of a menu collapse any open menus
      this._on( this.document, {
          click: function( event ) {
              if ( !$( event.target ).closest( ".ui-menu" ).length ) {
                  this.collapseAll( event );
              }
  
              // Reset the mouseHandled flag
              this.mouseHandled = false;
          },
          // I ADDED THIS:
          mouseout: function( event ) {
              this.collapseAll( event );
          }
      });
  </code></pre>
  
  <p>It produced the behavior I was going for... sort of... 
  Now I have spotty mouse enter detection for my menu item with the submenu attached. Not really ok with putting a live site up where the menu only works some of the time. Any ideas? Am I doing this the hard way or the wrong way, or is there something I simply don't know about? I'm not the greatest with jQuery, just started in fact.</p>
  
  <p>I'm using a setup that is basically an augmented version of the example on the jQuery UI demo page of the menu widget, so I don't think it's my html that's causing the problem. </p>