<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="nav"> <nav id="myNavbar" class="navbar navbar-default" role="navigation"> <ul class="menu menu-bar"> <li class="nav-item dropdown position-static menu-link menu-bar-link"> <a href="javascript:void(0);" aria-haspopup="true" data-toggle="dropdown" class="dropdown-toggle">1. Multilevel mega menu <b class="caret"></b></a> <div class="dropdown-menu mt-0 w-100"> <h3>Products</h3> <div class="row"> <div class="megadpdwninfo col-md-5"> <p>dfdsgdsgfdgfdhsodg<br/>jfosdjfods<br/>hksdhfdshfdshfsfh<br/>dfhsadofoshoshf<br/>lfhdsoihodshf<br/></p> </div> <div class="megadpdwnulli"> <ul class="mega-menu mega-menu--multiLevel"> <li class="frstlevel dropdown position-static"> <a href="javascript:void(0);" class="menu-link mega-menu-link dropdown-toggle" aria-haspopup="true" data-toggle="dropdown">1.1 Flyout link</a> <ul class="frstleveldp dropdown-menu menu menu-list"> <li> <a href="/page" class="menu-link menu-list-link">1.1.1 Page link</a> </li> <li class="seclevel dropdown position-static"> <a href="javascript:void(0);" class="menu-link menu-list-link" aria-haspopup="true">1.1.2 Flyout link</a> <ul class="secleveldp dropdown-menu menu menu-list"> <li> <a href="/page" class="menu-link menu-list-link">1.1.2.1 Page link</a> </li> <li> <a href="/page" class="menu-link menu-list-link">1.1.2.2 Page link</a> </li> </ul> </li> <li> <a href="/page" class="menu-link menu-list-link">1.1.3 Page link</a> </li> </ul> </li> <li class="frstlevel dropdown position-static"> <a href="javascript:void(0);" class="menu-link mega-menu-link dropdown-toggle" aria-haspopup="true" data-toggle="dropdown">1.2 Flyout link</a> <ul class="frstleveldp dropdown-menu menu menu-list"> <li> <a href="/page" class="menu-link menu-list-link">1.2.1 Page link</a> </li> <li> <a href="/page" class="menu-link menu-list-link">1.2.2 Page link</a> </li> </ul> </li> <li class="frstlevel dropdown position-static"> <a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.3 Flyout link</a> <ul class="frstleveldp dropdown-menu menu menu-list"> <li> <a href="/page" class="menu-link menu-list-link">1.3.1 Page link</a> </li> <li> <a href="/page" class="menu-link menu-list-link">1.3.2 Page link</a> </li> </ul> </li> <li> <a href="/page" class="menu-link mega-menu-link">1.4 Page link</a> </li> <li class="mobile-menu-back-item"> <a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a> </li> </ul> </div> </div> </div> </li> <li> <a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">2. Flat mega menu (3 cols)</a> </li> <li> <a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">3. Flat mega menu (2 cols)</a> </li> <li> <a href="/page" class="menu-link menu-bar-link">Static link</a> </li> </ul> </nav> </div> </div>

.navbar { padding: 0; } .dropdown-menu { min-width: 10rem; padding: 100px 0; margin: 0; background-color: #aeaeae; background-clip: padding-box; border: 0px solid rgba(0,0,0,.15); border-radius: 0; } ul.menu.menu-list { position: absolute; float: left; left: 100%; top: 0; } .megadpdwnulli { position: relative; } .frstleveldp, .secleveldp { position: absolute; display: none; left: 100%; top: 0%; float: left; padding: 0; } .frstlevel.dropdown, .seclevel.dropdown-menu { display: block; } .frstlevel.dropdown:hover .frstleveldp.dropdown-menu, .seclevel.dropdown:hover .secleveldp.dropdown-menu { display: block; } .mega-menu--multiLevel li:hover > [aria-haspopup="true"] ~ ul { display: block; transform-origin: left; animation: flyout 0.2s ease-out; } .mega-menu--multiLevel li:hover > [aria-haspopup="true"], .mega-menu--multiLevel li:focus-within > [aria-haspopup="true"], .mega-menu--multiLevel li:hover > a, .mega-menu--multiLevel li:focus-within > a { background: #dceced; color: #136a73; } nav ul, nav li { list-style: none; padding: 0; margin: 0; } nav a { display: block; text-decoration: none; } nav a:hover, nav a:visited { text-decoration: none; } .menu-bar { background: #ffffff; display: flex; } .menu-link { padding: 20px 25px; background: #ffffff; color: #177e89; transition: background .2s, color .2s; position: relative; z-index: 1; } .menu-link[aria-haspopup="true"] { padding-right: 40px; } .menu-link[aria-haspopup="true"]:after { content: ""; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowRight.svg#accent'); background-size: 14px; width: 14px; height: 14px; font-size: 12px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } .mega-menu { background: #ffffff; z-index: 10; } .mega-menu--multiLevel { flex-direction: column; } @keyframes dropdown { 0% { opacity: 0; transform: scaleY(0); } 50% { opacity: 1; } 100% { transform: scaleY(1); } } @keyframes flyout { 0% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); } } @media screen and (min-width: 768px){ .menu-bar > .dropdown:hover .dropdown-menu.mt-0.w-100 { display: block; transform-origin: top; animation: dropdown 0.2s ease-out; } .dropdown-menu{ margin-top: 0; } .dropdown-toggle{ margin-bottom: 2px; } .navbar .dropdown-toggle, .nav-tabs .dropdown-toggle{ margin-bottom: 0; } }

$(document).on('click', '.dropdown-menu', function (e) { e.stopPropagation(); });