"Multi level dropdown menu BS3 - CMacutela"
Bootstrap 3.3.0 Snippet by comc82

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a href="#">First level</a></li> <li><a href="#">First level</a></li> <li class="dropdown-submenu"> <a href="#">First level</a> <ul class="dropdown-menu sub-menu scrollable-menu" role="menu"> <li><a tabindex="-1" href="#">Second level</a></li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> </ul> </li> </ul> </div>
.scrollable-menu { height: auto; max-height: 300px; overflow-x: hidden; } .dropdown-menu{ margin: 0; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; } .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 { width: 100px; }

Related: See More


Questions / Comments: