bootstrap dropdown hide when mouse leaves menu

index.html

<div class="navbar">
              <div class="navbar-inner">
                <div class="container" style="width: auto;">
                  <a class="brand" href="#">Project Name</a>
                  <ul class="nav" role="navigation">
                    <li class="dropdown">
                      <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                        <li><a tabindex="-1" href="http://google.com">Action</a></li>
                        <li><a tabindex="-1" href="#anotherAction">Another action</a></li>
                        <li><a tabindex="-1" href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a tabindex="-1" href="#">Separated link</a></li>
                      </ul>
                    </li>
                    <li class="dropdown">
                      <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
                        <li><a tabindex="-1" href="#">Action</a></li>
                        <li><a tabindex="-1" href="#">Another action</a></li>
                        <li><a tabindex="-1" href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a tabindex="-1" href="#">Separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                  <ul class="nav pull-right">
                    <li id="fat-menu" class="dropdown">
                      <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
                        <li><a tabindex="-1" href="#">Action</a></li>
                        <li><a tabindex="-1" href="#">Another action</a></li>
                        <li><a tabindex="-1" href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a tabindex="-1" href="#">Separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

script.js

$(".dropdown-menu").mouseleave(function(){
      $(".dropdown").removeClass("open");
    });

This worked in some browsers but had to remove. On Mozilla this was causing the dropdown to open and close immediately.

It works fine, but somewhat unpredictably. If there are margins between the dropdown and the parent menu-item, like the default 2px top-margin on the dropdown, then it can close prematurely. The dropdown will also close when mousing back to the parent link.

To prevent this behavior, you can zero the dropdown's margin and use .menu-item-has-children as the jQuery's target (...

.dropdown-menu { margin-top: 0; }

// Bootstrap navbar hide dropdown on mouseout
    $(".menu-item-has-children").mouseleave(function(){
        $(".dropdown").removeClass("open");
    });