<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> <li><a href="#">Available glyphs</a></li> <li class="disabled"><a href="#">How to use</a></li> <li><a href="#">Examples</a></li> <li class="divider"></li> <li class="dropdown-header">Dropdowns</li> <li><a href="#">Example</a></li> <li><a href="#">Aligninment options</a></li> <li><a href="#">Headers</a></li> <li><a href="#">Disabled menu items</a></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> <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/iA/Sedan/perspective/side-left/2016_36.png" /> </a> <p>2016 Scion iA Sedan</p> </div> <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/autodata/us/640/2016/USC60SCC071A0/USC60SCC071A021003.png" /> </a> <p>2016 Scion iM Hatchback</p> </div> <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> <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/iA/Sedan/perspective/side-left/2016_36.png" /> </a> <p>2016 Scion iA Sedan</p> </div> <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/autodata/us/640/2016/USC60SCC071A0/USC60SCC071A021003.png" /> </a> <p>2016 Scion iM Hatchback</p> </div> </li> </ul> </li> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a> <ul class="dropdown-menu megamenu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Glyphicons</li> <li><a href="#">Available glyphs</a></li> <li class="disabled"><a href="#">How to use</a></li> <li><a href="#">Examples</a></li> <li class="divider"></li> <li class="dropdown-header">Dropdowns</li> <li><a href="#">Example</a></li> <li><a href="#">Aligninment options</a></li> <li><a href="#">Headers</a></li> <li><a href="#">Disabled menu items</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Button groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Button toolbar</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Nesting</a></li> <li><a href="#">Vertical variation</a></li> <li class="divider"></li> <li class="dropdown-header">Button dropdowns</li> <li><a href="#">Single button dropdowns</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Input groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Checkboxes and radio addons</a></li> <li class="divider"></li> <li class="dropdown-header">Navs</li> <li><a href="#">Tabs</a></li> <li><a href="#">Pills</a></li> <li><a href="#">Justified</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Navbar</li> <li><a href="#">Default navbar</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Text</a></li> <li><a href="#">Non-nav links</a></li> <li><a href="#">Component alignment</a></li> <li><a href="#">Fixed to top</a></li> <li><a href="#">Fixed to bottom</a></li> <li><a href="#">Static top</a></li> <li><a href="#">Inverted navbar</a></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:100%; 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"); }); });