title: jQuery button menu dropdown keeps firing blur event
body: <p>I'm trying to implement a <code>button</code> that shows a <code>dropdown menu</code>, which should get dismissed any time one clicks on something other than the menu.<br>
  But for some reason, the <code>blur</code> event is also fired when the mouse remains over the button itself.  I can't seem to figure out how to use the menu widget, seems like what I'm trying to do would be a pretty common use case of the menu widget.</p>
  
  <p>Here's what I have so far:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    var menu = $("#menu").hide();
    var timer;
    menu.menu({
      focus: function() {
        clearTimeout(timer);
      },
      blur: function() {
        timer = setTimeout(function() {
         menu.menu('collapseAll', null, true).hide();
        }, 250);
      }
    });
  
    $("#dropdownbtn").button().click(function() {
      menu.show().focus().position({
        my: "left top",
        at: "left bottom",
        of: this
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/&gt;
  &lt;div style="position: absolute;"&gt;
  &lt;ul id="menu"&gt;
    &lt;li class="ui-state-disabled"&gt;&lt;div&gt;Toys (n/a)&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div&gt;Books&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div&gt;Clothing&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div&gt;Electronics&lt;/div&gt;
      &lt;ul&gt;
        &lt;li class="ui-state-disabled"&gt;&lt;div&gt;Home Entertainment&lt;/div&gt;&lt;/li&gt;
        &lt;li&gt;&lt;div&gt;Car Hifi&lt;/div&gt;&lt;/li&gt;
        &lt;li&gt;&lt;div&gt;Utilities&lt;/div&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;div&gt;Movies&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div&gt;Music&lt;/div&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;div&gt;Rock&lt;/div&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;div&gt;Alternative&lt;/div&gt;&lt;/li&gt;
            &lt;li&gt;&lt;div&gt;Classic&lt;/div&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;div&gt;Jazz&lt;/div&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;div&gt;Freejazz&lt;/div&gt;&lt;/li&gt;
            &lt;li&gt;&lt;div&gt;Big Band&lt;/div&gt;&lt;/li&gt;
            &lt;li&gt;&lt;div&gt;Modern&lt;/div&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;div&gt;Pop&lt;/div&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="ui-state-disabled"&gt;&lt;div&gt;Specials (n/a)&lt;/div&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div&gt;
  Text above button
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button id="dropdownbtn"&gt;Show menu&lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
  Text below button
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>