<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="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logo</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <b class="caret"></b> </a> <ul class="dropdown-menu megamenu row"> <li class="col-sm-6 col-md-3"> <ul> <li class="dropdown-header">Glyphicons</li> </ul> </li> <li> <div class="col-sm-6 col-md-3"> <a href="#" class="img-thumbnail"> <img src="https://images.dealer.com/ddc/resize/300x/quality/51/sharpen/1/ddc/ddc/vehicles/2016/Scion/FR-S/Coupe/perspective/side-left/2016_54.png" /> </a> <p>2016 Scion FR-S Coupe</p> </div> </li> </ul> </li> </ul> </li> </ul> </div> </div> </div>

.navbar-default{ color: #fff; background-color: #272727; border-color: #272727; } .navbar-default .navbar-nav > li > a{ color:#fff; } .navbar-default .navbar-nav > li > a:hover{ color:#fff; background-color: #C7081B; } .navbar-default .navbar-nav > .dropdown > a .caret{ border-top-color: ; border-bottom-color: #fff; } .navbar-default .navbar-brand{ color:#fff; } .menu-large { position: static !important; } .megamenu{ padding: 20px 0px; width:20%; background-color: #C7081B; } .megamenu> li > ul { padding: 0; margin: 0; } .megamenu> li > ul > li { list-style: none; } .megamenu> li > ul > li > a { display: block; padding: 5px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #fff; white-space: normal; } .megamenu> li ul > li > a:hover, .megamenu> li ul > li > a:focus { text-decoration: none; color: #fff; background-color: #333333; } .megamenu.disabled > a, .megamenu.disabled > a:hover, .megamenu.disabled > a:focus { color: #999999; } .megamenu.disabled > a:hover, .megamenu.disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .dropdown-header { color: #ffffff; font-size: 18px; font-weight: 700; } .img-thumbnail { background-color: #C7081B; border: 0; } .img-thumbnail:hover { background-color: #333333 !important; } @media (max-width: 768px) { .megamenu{ margin-left: 0 ; margin-right: 0 ; } .megamenu> li { margin-bottom: 30px; } .megamenu> li:last-child { margin-bottom: 0; } .megamenu.dropdown-header { padding: 3px 15px !important; } .navbar-nav .open .dropdown-menu .dropdown-header{ color:#fff; } }

// Dropdown Menu Fade jQuery(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop().fadeIn("fast"); }, function() { $('.dropdown-menu', this).stop().fadeOut("fast"); }); });