<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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="#"><img alt="Logo" src="https://www.solodev.com/assets/side-nav/logo.png"></a> </div> <div class="navbar-collapse collapse in" aria-expanded="true" style=""> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Products <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> <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" aria-expanded="false">Categories <b class="caret"></b></a> <ul class="dropdown-menu megamenu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Software</li> <li><a href="#">Desktop</a></li> <li class="disabled"><a href="#">Mobile</a></li> <li><a href="#">Tablet</a></li> <li class="divider"></li> <li class="dropdown-header">Hardware</li> <li><a href="#">Arduino</a></li> <li><a href="#">Raspberry PI</a></li> <li><a href="#">VoCore</a></li> <li><a href="#">Banana PI</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Nano-Tech</li> <li><a href="#">AFM</a></li> <li><a href="#">STM</a></li> <li><a href="#">Nano-Tubes</a></li> <li><a href="#">Nano-Wires</a></li> <li><a href="#">Materials</a></li> <li class="divider"></li> <li class="dropdown-header">A.I.</li> <li><a href="#">Artificial Intelligence</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">SaaS</li> <li><a href="#">On-Demand</a></li> <li><a href="#">No Software</a></li> <li><a href="#">Cloud Computing</a></li> <li class="divider"></li> <li class="dropdown-header">On-Premise</li> <li><a href="#">Data Center</a></li> <li><a href="#">Hosting Environment</a></li> <li><a href="#">Internal IT</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Server-Side</li> <li><a href="#">PHP</a></li> <li><a href="#">Java</a></li> <li><a href="#">Python</a></li> <li><a href="#">Ruby</a></li> <li><a href="#">ColdFusion</a></li> <li><a href="#">ASP.NET</a></li> <li><a href="#">GO</a></li> <li><a href="#">Perl</a></li> <li><a href="#">Lasso</a></li> </ul> </li> </ul> </li> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Services <b class="caret"></b></a> <ul class="dropdown-menu megamenu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Web Design</li> <li><a href="#">HTML5</a></li> <li class="disabled"><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li class="divider"></li> <li class="dropdown-header">Web Development</li> <li><a href="#">Websites</a></li> <li><a href="#">Mobile Apps</a></li> <li><a href="#">Responsive</a></li> <li><a href="#">Web Apps</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Graphic Design</li> <li><a href="#">PSD</a></li> <li><a href="#">Images</a></li> <li><a href="#">Logos</a></li> <li><a href="#"></a></li> <li><a href="#">Vertical variation</a></li> <li class="divider"></li> <li class="dropdown-header">Database Design</li> <li><a href="#">Single button dropdowns</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">UI/UX Design</li> <li><a href="#">User Interface</a></li> <li><a href="#">User Experience</a></li> <li><a href="#">Web Designers</a></li> <li class="divider"></li> <li class="dropdown-header">Digital Marketing</li> <li><a href="#">Paid</a></li> <li><a href="#">Social</a></li> <li><a href="#">Content Marketing</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Project Management</li> <li><a href="#">Initiating</a></li> <li><a href="#">Planning</a></li> <li><a href="#">Executing</a></li> <li><a href="#">Monitoring</a></li> <li><a href="#">Controlling</a></li> <li><a href="#">Closing</a></li> <li><a href="#">PM Systems</a></li> <li><a href="#">Best Practices</a></li> <li><a href="#">Project Manager</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </div>

/* megamenu*/ .navbar-brand>img { padding-top: 11px; width: 130px; margin-left: 60px; } .navbar-brand { height: auto; margin: 0; padding: 0; margin-right: 20px; } .navbar-default{ color: #fff; background-color: #2F4F4F; border-color: #000000; } .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{ padding: 20px 0px; width:100%; } .megamenu> li > ul { padding: 0; margin: 0; } .megamenu> li > ul > li { list-style: none; } .megamenu> li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: normal; } .megamenu> li ul > li > a:hover, .megamenu> li ul > li > a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .megamenu.disabled > a, .megamenu.disabled > a:hover, .megamenu.disabled > a:focus { color: #999999; } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { color: #00A7E8; } .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; } .megamenu.dropdown-header { color: #428bca; font-size: 18px; } @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; } }

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