Overview

This is Bootstrap component designed for multilevel dropdowns support.

Component dependencies

Requires jQuery, Bootsrap 3.x CSS and JavaScript files. Depends on Bootstrap Dropdown component and animate.css if want to use animations.

Bootstrap compatibility

Dropdownhover is fully compatible with Bootstrap's native Dropdown component. They two can be applied to the same item, providing hover and click events support. On small devices hover event is ignored.

Simply include Dropdownhover style and script files after Bootstrap's.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Dropdown Hover CSS -->
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/bootstrap-dropdownhover.min.css" rel="stylesheet">

  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Bootstrap Dropdown Hover JS -->
    <script src="js/bootstrap-dropdownhover.min.js"></script>
  </body>
</html>

Wrap the dropdown's trigger and the dropdown menu within .dropdown as it is important. Add data-hover="dropdown" to the main action button or link to activate hover event.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">
   Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li class="dropdown">
      <a href="#">One more dropdown</a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li class="dropdown">
          <a href="#">One more dropdown</a>
          <ul class="dropdown-menu">
          ...
          </ul>
        </li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
       </ul>
    </li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Mainly dropdown menu is positioned via CSS, but if dropdown is out of viewport it is positioned by JavaScript according to the window. Also dropdown menu supports classes .dropdown-menu-right and .pull-right to right align the dropdown menu.

May have cropping issues

Dropdown menu uses CSS and JavaScript for positioning but there are some issues with "long" dropdown menus on small screens. Plugin automaticaly tries to find the best solution, but there is a chance that part of dropdown is cropped. So try avoid dropdown menus which are more than 500px height.

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

or

<li class="dropdown pull-right">
...
</li>

Add data-hover="dropdown" to a <div class="collapse navbar-collapse"> or <ul class="nav navbar-nav"> to make Dropdownhover work with the whole navigation

...
<div class="collapse navbar-collapse" data-hover="dropdown" data-animations="fadeInDown fadeInRight fadeInUp fadeInLeft>
    <ul class="nav navbar-nav">
    ...
    </ul>
</div>
...
or
...
<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav" data-hover="dropdown" data-animations="fadeInDown fadeInRight fadeInUp fadeInLeft>
    ...
    </ul>
</div>
...

Add data-animations="{bottom} {left} {top} {right}" to enable custom animations. Uses animate.css also can be animated with custom animations, as animations names are CSS classes for animations.

data-animations="fadeInDown fadeInLeft fadeInUp fadeInRight"