"Bootstrap multi level navigation menu | multi level dropdown menu with responsive"
Bootstrap 3.3.0 Snippet by Tauhidpro

<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="text-center"><h2>Bootstrap multi level navigation menu | multi level dropdown menu <br> with responsive in Bootstrap 3</h2></div> <div id="header-area" class="header_area"> <div class="header_bottom"> <div class="container"> <div class="row"> <nav role="navigation" class="navbar navbar-default mainmenu"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collection of nav links and other content for toggling --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul id="fresponsive" class="nav navbar-nav dropdown"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">service</a></li> <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle">Submenu 1<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Lorem ipsum</a></li> <li> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Submenu 2<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Submenu 3<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#Download">lorem ipsum</a></li> </ul> </div> </nav> </div> </div> </div><!-- /.header_bottom --> </div> <br> <div class="text-center"> <img src="http://tauhidpro.com/add/bs2.png" alt="multi level dropdown menu" /> </div>
@import url('https://fonts.googleapis.com/css?family=Roboto'); a:hover, a:focus { text-decoration: none; outline: none; } body{font-family: 'Roboto', sans-serif;} /* 1.1 Header Area ***************************************************/ /*Bootstrap Reset*/ .navbar-nav > li > a { padding-top: 0; padding-bottom: 0; } .mainmenu { background-color: transparent; border-color: transparent; margin-bottom: 0; border: 0px !important; } .navbar-nav > li:last-child > a { padding-right: 0px; margin-right: 0px; } .dropdown-menu { padding: 0px 0; margin: 0 0 0; border: 0px solid transition !important; border: 0px solid rgba(0,0,0,.15); border-radius: 0px; -webkit-box-shadow: none !important; box-shadow: none !important; } /*=-====Main Menu=====*/ .navbar-nav .open .dropdown-menu > li > a {padding: 16px 15px 16px 25px; } .header_bottom { background: #0071ba } .header_area .header_bottom .mainmenu a , .navbar-default .navbar-nav > li > a { color: #fff; font-size: 16px; text-transform: capitalize; padding: 16px 15px; font-family: 'Roboto', sans-serif; } .header_area .mainmenu .active a, .header_area .mainmenu .active a:focus, .header_area .mainmenu .active a:hover, .header_area .mainmenu li a:hover, .header_area .mainmenu li a:focus , .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{ color: #0071ba; background: #54c6d4; outline: 0; } /*-----./ Main Menu-----*/ .navbar-default .navbar-toggle { border-color: #fff } /*Toggle Button*/ .navbar-default .navbar-toggle .icon-bar { background-color: #fff } /*Toggle Button*/ /*==========Sub Menu=v==========*/ .mainmenu .collapse ul > li:hover > a{background: #54c6d4;} .mainmenu .collapse ul ul > li:hover > a, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover{background: #CBEAF0;} .mainmenu .collapse ul ul ul > li:hover > a{background: #CBEAF0;} .mainmenu .collapse ul ul, .mainmenu .collapse ul ul.dropdown-menu{background:#98D7E1;} .mainmenu .collapse ul ul ul, .mainmenu .collapse ul ul ul.dropdown-menu{background:#0a1464} .mainmenu .collapse ul ul ul ul, .mainmenu .collapse ul ul ul ul.dropdown-menu{background:#e4eeb8} /******************************Drop-down menu work on hover**********************************/ .mainmenu{background: none;border: 0 solid;margin: 0;padding: 0;min-height:20px} @media only screen and (min-width: 767px) { .mainmenu .collapse ul li{position:relative;} .mainmenu .collapse ul li:hover> ul{display:block} .mainmenu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none} /*******/ .mainmenu .collapse ul ul li{position:relative} .mainmenu .collapse ul ul li:hover> ul{display:block} .mainmenu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none} /*******/ .mainmenu .collapse ul ul ul li{position:relative} .mainmenu .collapse ul ul ul li:hover ul{display:block} .mainmenu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1} }
(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);

Related: See More


Questions / Comments:

When I try to copy all the script in a html file, there is no response when I click the "hamburger" in mobile size. How can you do that? Thanks.

etigger () - 7 months ago - Reply 0


Thanks!

When I try to copy all the script in a html file, there is no response when I click the "hamburger" in mobile size.

How can do that?

etigger () - 7 months ago - Reply 0


Thanks!

When I try to copy all the script in a html file, there is no response when I click the "hamburger" in mobile size. How can do that?

etigger () - 7 months ago - Reply 0


Thanks! When I try to copy all the script in a html file, there is no response when I click the "hamburger" in mobile size. How can do that?

etigger () - 7 months ago - Reply 0


Very useful! When I try to copy all your script in a html file, there is no response when I click the "hamburger" in mobile size. How can you do that? Thanks.

etigger () - 7 months ago - Reply 0


Very useful! When I try to copy all your script in a html file, there is no response when I click the "hamburger" in mobile size. How can you do that? Thanks

etigger () - 7 months ago - Reply 0