<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> <div class="col-sm-6 col-md-3"> <a href="# " class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="# " class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="# " class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="# " class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </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: #ccc6c6; border-color: #aca1a2; } .navbar-default .navbar-nav > li > a { color:#fff; } .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #fff; border-bottom-color: #fff; } .navbar-default .navbar-brand { color:#fff; } .menu-large { position: static !important; } .megamenu {}

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