<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="container">
<div class="row">
<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="#">Next Mega</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" data-toggle="dropdown">Mega Menu <span class="fa fa-angle-down"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header no-padding">Featured Products</li>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="http://nextbootstrap.com"><img src="http://lorempixel.com/255/150/nature/" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-price" type="button">49,99 €</button>
<button href="http://nextbootstrap.com" class="btn btn-wishlist" type="button"><span class="fa fa-heart"></span> Add to Wishlist</button>
</div>
<!-- End Item -->
<div class="item">
<a href="http://nextbootstrap.com"><img src="http://lorempixel.com/255/150/sports/" class="img-responsive" alt="product 2"></a>
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-price" type="button">9,99 €</button>
<button href="http://nextbootstrap.com" class="btn btn-wishlist" type="button"><span class="fa fa-heart"></span> Add to Wishlist</button>
</div>
<!-- End Item -->
<div class="item">
<a href="http://nextbootstrap.com"><img src="http://lorempixel.com/255/150/fashion/" class="img-responsive" alt="product 3"></a>
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-price" type="button">49,99 €</button>
<button href="http://definitionword.com" class="btn btn-wishlist" type="button"><span class="fa fa-heart"></span> Add to Wishlist</button>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
</div>
<!-- /.carousel -->
<li class="divider"></li>
<li><a href="http://definitionword.com">View all Collection <span class="fa fa-angle-right pull-right"></span></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Bootstrap Mega Menu</li>
<li><a href="http://definitionword.com">HTML</a></li>
<li><a href="http://definitionword.com">CSS</a></li>
<li><a href="http://definitionword.com">JavaScript</a></li>
<li><a href="https://peexaweb.com">jQuery</a></li>
<li><a href="https://peexaweb.com">Bootstrap</a></li>
<li class="divider"></li>
<li class="dropdown-header">Version</li>
<li><a href="https://peexaweb.com">Bootstrap 3</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li><a href="https://peexaweb.com">Responsive</a></li>
<li><a href="https://peexaweb.com">Easy</a></li>
<li><a href="http://sirseni.com">Customizable</a></li>
<li class="divider"></li>
<li class="dropdown-header">Other Features</li>
<li><a href="http://sirseni.com">Clean</a></li>
<li><a href="http://sirseni.com">Modern</a></li>
<li><a href="http://sirseni.com">User Friendly</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Designed for</li>
<li><a href="http://sirseni.com">Ecommerce</a></li>
<li><a href="http://nextearning.com">Corporate site</a></li>
<li><a href="http://nextearning.com">Magazine </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-signin btn-block">Sign in</button>
</form>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
</div>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
background: rgb(0,0,48); /* Old browsers */
background: -moz-linear-gradient(left, rgba(0,0,48,1) 0%, rgba(255,34,244,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,48,1) 0%,rgba(255,34,244,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,48,1) 0%,rgba(255,34,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2196f3', endColorstr='#9222f4',GradientType=1 ); /* IE6-9 */
}
h1,
.h1 {
font-size: 36px;
text-align: center;
font-size: 5em;
color: #404041;
}
.navbar-default{
background: #151433;
border-radius: 0;
border: none;
}
.navbar-default .navbar-brand {
color: #2196f3;
}
.navbar-default .navbar-nav > li > a{
color: #999;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
color: rgb(33,150,243);
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
color: #fff;
}
.navbar-nav>li>.dropdown-menu{
background: rgb(33,150,243); /* Old browsers */
background: -moz-linear-gradient(left, rgba(33,150,243,1) 0%, rgba(146,34,244,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(33,150,243,1) 0%,rgba(146,34,244,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(33,150,243,1) 0%,rgba(146,34,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2196f3', endColorstr='#9222f4',GradientType=1 ); /* IE6-9 */
}
.navbar-default .no-padding{
padding: 0;
}
.navbar-default .btn-price, .navbar-default .btn-wishlist , .navbar-default .btn-signin{
border-radius: 20px;
background: transparent;
border:1px solid rgba(255, 255, 255, 0.5);
color: #FFF;
}
.navbar-default .form-control{
margin-bottom: 20px;
background: rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 0;
box-shadow: none;
}
.navbar-default .nav .open > a, .navbar-default .nav .open > a:hover, .navbar-default .nav .open > a:focus{
background: rgb(33,150,243); /* Old browsers */
background: -moz-linear-gradient(left, rgba(33,150,243,1) 0%, rgba(146,34,244,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(33,150,243,1) 0%,rgba(146,34,244,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(33,150,243,1) 0%,rgba(146,34,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2196f3', endColorstr='#9222f4',GradientType=1 ); /* IE6-9 */
}
.navbar-default .dropdown-menu .divider{
background: rgba(255, 255, 255, 0.3);
}
.navbar-default h4 small{
color: rgba(255, 255, 255, 0.7);
}
.navbar-nav>li>.dropdown-menu {
margin-top: 20px;
border:none;
}
.navbar-default .navbar-nav>li>a {
width: 130px;
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;
}
.mega-dropdown-menu:before {
content: "";
border-bottom: 15px solid rgb(33,150,243);
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -14px;
left: 165px;
z-index: 10;
}
.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: #DDD;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #fff;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.1);
}
.mega-dropdown-menu .dropdown-header {
color: #FCFCFC;
font-size: 18px;
}
.mega-dropdown-menu form {
margin: 3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
.demo-text small{
color: #bbb;
}
.demo-text a{
color: #fff;
text-decoration: none;
}
jQuery(document).on('click', '.mega-dropdown', function(e) {
e.stopPropagation()
})
