<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">MegaMenu</a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">New in Stores</li> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a> <h4><small>Summer dress floral prints</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div><!-- End Item --> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a> <h4><small>Gold sandals with shiny touch</small></h4> <button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div><!-- End Item --> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a> <h4><small>Denin jacket stamped</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div><!-- End Item --> </div><!-- End Carousel Inner --> </div><!-- /.carousel --> <li class="divider"></li> <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Dresses</li> <li><a href="#">Unique Features</a></li> <li><a href="#">Image Responsive</a></li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Newsletter Form</a></li> <li><a href="#">Four columns</a></li> <li class="divider"></li> <li class="dropdown-header">Tops</li> <li><a href="#">Good Typography</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Jackets</li> <li><a href="#">Easy to customize</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li class="divider"></li> <li class="dropdown-header">Pants</li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> <li><a href="#">Calls to action</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Accessories</li> <li><a href="#">Default Navbar</a></li> <li><a href="#">Lovely Fonts</a></li> <li><a href="#">Responsive Dropdown </a></li> <li class="divider"></li> <li class="dropdown-header">Newsletter</li> <form class="form" role="form"> <div class="form-group"> <label class="sr-only" for="email">Email address</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <button type="submit" class="btn btn-primary btn-block">Sign in</button> </form> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" >Collection1 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">New in Stores 1</li> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a> <h4><small>Summer dress floral prints</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div><!-- End Item --> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a> <h4><small>Gold sandals with shiny touch</small></h4> <button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div><!-- End Item --> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a> <h4><small>Denin jacket stamped</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div><!-- End Item --> </div><!-- End Carousel Inner --> </div><!-- /.carousel --> <li class="divider"></li> <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Dresses</li> <li><a href="#">Unique Features</a></li> <li><a href="#">Image Responsive</a></li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Newsletter Form</a></li> <li><a href="#">Four columns</a></li> <li class="divider"></li> <li class="dropdown-header">Tops</li> <li><a href="#">Good Typography</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Jackets</li> <li><a href="#">Easy to customize</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li class="divider"></li> <li class="dropdown-header">Pants</li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> <li><a href="#">Calls to action</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Accessories</li> <li><a href="#">Default Navbar</a></li> <li><a href="#">Lovely Fonts</a></li> <li><a href="#">Responsive Dropdown </a></li> <li class="divider"></li> <li class="dropdown-header">Newsletter</li> <form class="form" role="form"> <div class="form-group"> <label class="sr-only" for="email">Email address</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <button type="submit" class="btn btn-primary btn-block">Sign in</button> </form> </ul> </li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </nav> </div> <script> $('li.dropdown.mega-dropdown a').on('click', function (event) { $(this).parent().toggleClass("open"); }); $('body').on('click', function (e) { if (!$('li.dropdown.mega-dropdown').is(e.target) && $('li.dropdown.mega-dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0) { $('li.dropdown.mega-dropdown').removeClass('open'); } }); </script>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; background:#f0f0f0; } .navbar-nav>li>.dropdown-menu { /*margin-top:20px;*/ border-top-left-radius:4px; border-top-right-radius:4px; } .navbar-default .navbar-nav>li>a { width:200px; font-weight:bold; } .mega-dropdown { position: static !important; /*width:100%;*/ } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .open .dropdown-toggle:after { border-bottom: 15px solid #fff; border-left: 17px solid transparent; border-right: 17px solid transparent; content: ""; left: 163px; position: absolute; bottom: -21px; z-index: 1500; } .open .dropdown-toggle span:after { border-bottom: 17px solid #ccc; border-left: 19px solid transparent; border-right: 19px solid transparent; content: ""; left: -10px; position: absolute; bottom: -41px; z-index: 8; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #999; white-space: normal; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #444; background-color: #f5f5f5; } .mega-dropdown-menu .dropdown-header { color: #428bca; font-size: 18px; font-weight:bold; } .mega-dropdown-menu form { margin:3px 20px; } .mega-dropdown-menu .form-group { margin-bottom: 3px; } .dropdown:hover .dropdown-menu { display: block; } .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; } .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { margin-top: 0; } .navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px; } .navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px; }