<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 ----------> <nav class="navbar"> <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> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection</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 class="col-sm-3"> <img height="100" width="100" src=""/> </div> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">New in Stores</li> <div class="col-sm-3"> <div class="col-sm-3"> <img height="100" width="100" src=""/> </div> </div> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Collection 2</span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">New in Stores asd</li> <div class="col-sm-3"> <div class="col-sm-3"> <img height="100" width="100" src=""/> </div> </div> </ul> </li> </ul> </li> <li class="dropdown nav-search"><div> <label for="search"></label> <input type="text" id="search" title="Search..." placeholder="Search..."> <input type="button" value=""> </div></li> </ul> </div> <!-- /.nav-collapse --> </nav> <h1 class="c-text"> Bootstrap Mega Menu </h1>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; background: #fff } h1, .h1 { font-size: 36px; text-align: center; font-size: 5em; color: #404041; } .navbar { min-height: 0; } .navbar-collapse { padding:0; } .navbar-nav>li>a { text-transform:uppercase; border-right:1px solid #aaabae; border-left:1px solid #aaabae; padding: 0 20px; line-height:30px; color:#848486; transition: all .3s ease; } .navbar-nav>li>a:hover, .nav .open>a, .nav .open>a:hover, .nav .open>a:focus, .nav>li>a:hover, .nav>li>a:focus { background-color:#848486; color:#fff; } .mega-dropdown { position: static !important; width: auto; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; transition: all .3s ease .15s; background: #848486!important; } .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: #372f2b; font-size: 14px; font-weight: bold; text-transform: uppercase; } .mega-dropdown-menu form { margin: 3px 20px; } .mega-dropdown-menu .form-group { margin-bottom: 3px; } .nav-search > div { border-left: 1px solid #aaabae; height: 30px; position: relative; width: inherit; z-index: 510; } .nav-search input[type="text"] { background: #fff; border: 1px solid transparent; color: #999; display: block; float: left; line-height: 24px; padding: 2px 0; text-shadow: 0 0 1px rgba(0,0,0,.35); transition: all .3s ease 1s; width: 0; } .nav-search input[type="text"]:focus { color: #000; } .nav-search input[type="text"]:focus, .nav-search:hover input[type="text"] { padding: 2px 20px; transition: all .3s ease .1s; width: 110px; border-color: #aaabae; } .nav-search input[type="submit"] { background: #fff url(../img/search-icon.png) no-repeat center center; border-radius: 0 3px 3px 0; cursor: pointer; display: block; float: left; height: 30px; padding: 0 25px; transition: all .3s ease; border: 1px solid transparent; } .nav-search input:focus, .nav-search input[type="submit"]:hover { border-color: #aaabae; }

jQuery(document).on('click', '.mega-dropdown', function(e) { e.stopPropagation() })