"Bootstrap 4 Mega Menu 3 Level"
Bootstrap 4.1.1 Snippet by Raducanu

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="menu-area"> <div class="container"> <div class="row"> <nav class="navbar navbar-light navbar-expand-lg mainmenu"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="fa fa-bars" aria-hidden="true"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="active"> <a href="#">Home <span class="sr-only">(current)</span></a> </li> <li><a href="#">Link</a></li> <li class="dropdown"> <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <i class="fa fa-angle-down" aria-hidden="true"></i> </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="dropdown"> <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown2 <i class="fa fa-angle-down only-mobile" aria-hidden="true"></i> <i class="fa fa-angle-right only-desktop" aria-hidden="true"></i> </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="dropdown"> <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown3 <i class="fa fa-angle-down only-mobile" aria-hidden="true"></i> </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Service</a></li> </ul> </div> </nav> </div> </div> </div>
.menu-area { background-color: #131d33; } .dropdown-menu { padding: 0; margin: 0; border: 0 solid transition!important; border: 0 solid rgba(0, 0, 0, .15); border-radius: 0; -webkit-box-shadow: none!important; box-shadow: none!important } /*.mainmenu a,*/ .navbar-default .navbar-nav > li > a, .mainmenu ul li a, .navbar-expand-lg .navbar-nav .nav-link { color: #fff; font-size: 16px; text-transform: capitalize; padding: 16px 15px; font-family: 'Roboto', sans-serif; display: block !important; } .mainmenu .active a, .mainmenu .active a:focus, .mainmenu .active a:hover, .mainmenu li a:hover, .mainmenu li a:focus, .navbar-default .navbar-nav>.show>a, .navbar-default .navbar-nav>.show>a:focus, .navbar-default .navbar-nav>.show>a:hover { color: #fff; background-color: #0f3c9e; outline: 0; } .navbar-light .navbar-toggler{ padding: 0; } .navbar-light .navbar-toggler .fa-bars{ color: #fff; border: 1px solid #fff; padding: 5px 10px; } .only-mobile{ display: none; } .only-desktop{ display: block; } /*==========Sub Menu=v==========*/ .mainmenu .collapse ul > li:hover > a { background-color: #0f3c9e; text-decoration: none; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .mainmenu .collapse ul ul > li:hover > a /*.navbar-default .navbar-nav .show .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .show .dropdown-menu > li > a:hover*/ { background-color: #0f3c9e; } .mainmenu .collapse ul ul ul > li:hover > a { background-color: #0f3c9e; } .mainmenu .collapse ul ul, .mainmenu .collapse ul ul.dropdown-menu { background-color: #131d33; } .mainmenu .collapse ul ul ul, .mainmenu .collapse ul ul ul.dropdown-menu { background-color: #131d33 } .mainmenu .collapse ul ul ul ul, .mainmenu .collapse ul ul ul ul.dropdown-menu { background-color: #131d33 } /******************************Drop-down menu work on hover**********************************/ .mainmenu { background: none; border: 0 solid; margin: 0; padding: 0; min-height: 20px; width: 100%; } @media only screen and (min-width: 767px) { /* Level 1 */ .mainmenu .collapse ul ul { position: absolute; top: 80px; left: 0; min-width: 250px; display: block; visibility: hidden; opacity: 0; -webkit-transition: 0.5s ease all; transition: 0.5s ease all; } .mainmenu .collapse ul li:hover> ul { visibility: visible; opacity: 1; top: 100%; } /* Level 2 */ .mainmenu .collapse ul ul li { position: relative; } .mainmenu .collapse ul ul ul { position: absolute; top: 0; left: 120%; min-width: 250px; display: block; visibility: hidden; opacity: 0; -webkit-transition: 0.5s ease all; transition: 0.5s ease all; } .mainmenu .collapse ul ul li:hover> ul { visibility: visible; opacity: 1; top: 0; left: 100%; } .mainmenu .collapse ul ul li a .fa-angle-right{ position: absolute; right: 20px; top: 20px; } /* Level 3 */ .mainmenu .collapse ul ul ul li { position: relative } .mainmenu .collapse ul ul ul ul { position: absolute; top: 0; left: -120%; min-width: 250px; display: block; z-index: 1; visibility: hidden; opacity: 0; -webkit-transition: 0.5s ease all; transition: 0.5s ease all; } .mainmenu .collapse ul ul ul li:hover ul { visibility: visible; opacity: 1; top: 0; left: -100% !important; } } @media only screen and (max-width: 767px) { .only-mobile{ display: inline-block; } .only-desktop{ display: none; } /*.navbar-nav .show .dropdown-menu .dropdown > li > a{ background-color: #fff; }*/ .mainmenu .collapse ul ul > li.dropdown > a, .mainmenu .collapse ul ul > li.dropdown > ul.dropdown-menu > li.dropdown > a{ background-color: #0f3c9e; padding: 16px 15px 16px 15px; } .navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a, .navbar-nav .show .dropdown-menu .dropdown-menu > li > a, .navbar-nav .show .dropdown-menu > li > a { padding: 16px 15px 16px 35px; background-color: #202e4c; } .navbar-nav .show .dropdown-menu .dropdown-menu > li > a:hover, .navbar-nav .show .dropdown-menu > li > a:hover{ background-color: #0f3c9e; } /* Level 1 mobile arrow */ .mainmenu ul li a .fa-angle-down{ position: absolute; right: 15px; top: 15px; width: 25px; height: 25px; background-color: #fff; color: #0f3c9e; text-align: center; line-height: 25px; } } /*custom css*/ .mainmenu ul li a.dropdown-toggle::after{ display: none; }
(function($){ $('.dropdown-menu a.dropdown-toggle').on('click', function(e) { if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass("show"); } var $subMenu = $(this).next(".dropdown-menu"); $subMenu.toggleClass('show'); $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { $('.dropdown-submenu .show').removeClass("show"); }); return false; }); })(jQuery)

Related: See More


Questions / Comments: