title: Keep bootstrap dropdown when mouse is out
body: <p>I have a multilevel dropdown made with bootstrap, now when I navigate few levels deep and accidentally pointer comes out of current dropdown list, all lists are closed until 1st level. How can I keep all opened dropdowns open and close only when it is clicked outside dropdown? i.e. do the same when mouse is clicked on outer space, not when just moved there.</p>
  
  <p>Here is my demo: <a href="http://jsfiddle.net/n8XJb/" rel="nofollow">http://jsfiddle.net/n8XJb/</a></p>
  
  <pre><code>&lt;ul class="nav nav-pills"&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu" id="menu1"&gt;
          &lt;li class="dropdown-submenu"&gt;
            &lt;a href="#"&gt;Level 1&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li class="dropdown-submenu"&gt;
                &lt;a href="#"&gt;Level 2&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Level 3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When you navigate to Level 3, and then mouse pointer comes out of current list, it goes back to Level 1 instantly.</p>