Bootstrap 3.0 and newer no longer supports multiple tier dropdowns for navigation bars. This snippet of jquery prevents Bootstrap from toggling the “open” classes when you go past the first dropdown. No additional CSS or markup required!

/**
  * NAME: Bootstrap 3 Triple Nested Sub-Menus
  * This script will active Triple level multi drop-down menus in Bootstrap 3.*
  */
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // Re-add .open to parent sub-menu item
    $(this).parent().addClass('open');
    $(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});

This has been tested to work with Bootstrap 3.1.x up to 2 tiers for dropdown menus.

5 Responses to “Multilevel dropdown menus with Bootstrap 3.x”

  1. Ashish

    I've added this jQuery to my footer. Then I am using this HTML code to have two-level menu but this is not working.
    <ul class="nav navbar-nav">
    <li class="dropdown">
    <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Learn
    <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="basics-of-web-learn.php">Basics of Web</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Basics of Web
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="#">Basics</a></li>
    <li><a href="#">HTTP Request Methods</a></li>
    <li><a href="#">HTTP Response Codes</a></li>
    </ul>
    </li>
    <li><a href="web-design-principles-learn.php">Web Design Principles</a></li>
    <li><a href="html-learn.php">HTML</a></li>
    <li><a href="css-learn.php">CSS</a></li>
    <li><a href="javascript-learn.php">JavaScript</a></li>
    <li><a href="xml-learn.php">XML</a></li>
    <li><a href="php-learn.php">PHP</a></li>
    <li><a href="mysql-learn.php">MySQL</a></li>
    </ul>
    </li>
    <li class="dropdown">
    <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Examples
    <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="html-practicals-examples.php">HTML</a></li>
    <li><a href="css-practicals-examples.php">CSS</a></li>
    <li><a href="javascript-practicals-examples.php">JavaScript</a></li>
    <li><a href="xml-practicals-examples.php">XML</a></li>
    <li><a href="php-practicals-examples.php">PHP</a></li>
    <li><a href="mysql-practicals-examples.php">MySQL</a></li>
    </ul>
    </li>
    <li class="dropdown">
    <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Q & A
    <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="basics-of-web-questions-answers.php">Basics of Web</a></li>
    <li><a href="web-design-principles.php">Web Design Principles</a></li>
    <li><a href="html-questions-answers.php">HTML</a></li>
    <li><a href="css-questions-answers.php">CSS</a></li>
    <li><a href="javascript-questions-answers.php">JavaScript</a></li>
    <li><a href="xml-questions-answers.php">XML</a></li>
    <li><a href="php-questions-answers.php">PHP</a></li>
    <li><a href="mysql-questions-answers.php">MySQL</a></li>
    </ul>
    </li>
    </ul>

    Reply
  2. David Sienko

    Would love to know how use this snippet. Do i add jquery and which verion? and do I add this snippet as it's own file?

    Dave

    Reply
  3. Artem

    Well for me css IS required.

    Added the following styles:

    /*Dropdown Css*/
    .dropdown:hover > .dropdown-menu {
    display: block;
    }
    .dropdown-submenu {
    position: relative;
    }
    .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: 1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
    }
    .dropdown-submenu:hover > .dropdown-menu {
    display: block;
    }
    .dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
    }
    .dropdown-submenu:hover>a:after {
    border-left-color: #fff;
    }
    .dropdown-submenu.pull-left {
    float: none;
    }
    .dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
    }
    /*./Dropdown Css*/

    Reply
  4. Artem

    I found solution which work OK both on desktop and mobile versions.

    JS:

    (function($){
    $(document).ready(function(){
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).parent().siblings().removeClass('open');
    $(this).parent().toggleClass('open');
    });
    });
    })(jQuery);

    CSS:

    .marginBottom-0 {margin-bottom:0;}

    .dropdown-submenu{position:relative;}
    .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
    .dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
    .dropdown-submenu:hover>a:after{border-left-color:#555;}
    .dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

    Reply

Leave a Reply