Twitter Bootstrap Dropdown on Hover

Simple, small jQuery plug-in to open drop down menus automatically on hover (mouse over).

by karimkhan

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div id="navbar-example" class="navbar navbar-static">
  <div class="navbar-inner">
    <div class="container" style="width: auto;"> <a class="brand" href="#">JavaScript</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>

     ...

JavaScript

-