<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"> <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> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown col-md-15 col-sm-15 mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 1</a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Main Title </li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title >></a></li> <li class="divider"></li> <li class="dropdown-header">Main Title</li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title >></a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Main Title</li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title >></a></li> <li class="divider"></li> <li class="dropdown-header">Main Title</li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title >></a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Main Title</li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title >></a></li> <li class="divider"></li> <li class="dropdown-header">Main Title</li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title >></a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Main Title</li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title</a></li> <li><a href="#">Title »</a></li> <li class="divider"></li> <a href="#"> <li class="dropdown-header">Title</li></a> <a href="#"> <li class="dropdown-header">Title</li></a> <a href="#"> <li class="dropdown-header">Title</li></a> </ul> </li> </ul> </li> <li class="dropdown col-md-15 mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 2</a> <ul class="dropdown-menu dropdown-menu-2 mega-dropdown-menu mega-dropdown-menu-2c row"> <li class="col-sm-6"> <ul> <li class="dropdown-header">Dresses</li> <li><a href="#">Unique Features</a></li> <li><a href="#">Image Responsive</a></li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Newsletter Form</a></li> <li><a href="#">Four columns</a></li> </ul> </li> <li class="col-sm-6"> <ul> <li class="dropdown-header">Dresses</li> <li><a href="#">Unique Features</a></li> <li><a href="#">Image Responsive</a></li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Newsletter Form</a></li> <li><a href="#">Four columns</a></li> </ul> </li> </li> </ul> </li> <li class="dropdown col-md-15 mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 3 </a> <ul class="dropdown-menu dropdown-menu-3 mega-dropdown-menu mega-dropdown-menu-2c row"> <li class="col-sm-6"> <ul> <li class="dropdown-header">Dresses</li> <li><a href="#">Unique Features</a></li> <li><a href="#">Image Responsive</a></li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Newsletter Form</a></li> <li><a href="#">Four columns</a></li> </ul> </li> <li class="col-sm-6"> <ul> <li class="dropdown-header">Dresses</li> <li><a href="#">Unique Features</a></li> <li><a href="#">Image Responsive</a></li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Newsletter Form</a></li> <li><a href="#">Four columns</a></li> </ul> </li> </ul> </li> <li class="dropdown col-md-15 mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 4</a> <ul class="dropdown-menu dropdown-menu-4 mega-dropdown-menu mega-dropdown-menu-2c row"> <li class="col-sm-6"> <ul> <li><a href="#">Unique Features</a></li> <li><a href="#">Unique Features</a></li> <li><a href="#">Image Responsive</a></li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Newsletter Form</a></li> <li><a href="#">Four columns</a></li> </ul> </li> <li class="col-sm-6"> <ul> <li><a href="#">Unique Features</a></li> <li><a href="#">Unique Features</a></li> <li><a href="#">Image Responsive</a></li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Newsletter Form</a></li> <li><a href="#">Four columns</a></li> </ul> </li> </ul> </li> <li class="dropdown col-md-15 mega-dropdown"> <a href="#" class="no-dropdown" >Heading 5 </a> </li> </ul> </div><!-- /.nav-collapse --> </nav> </div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; background:#f0f0f0; } a { color: #fff; } a:hover, a:focus { color: #fff; text-decoration: underline; } @media (min-width: 768px) { .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; } } .navbar .navbar-collapse { background:#1F96F4; } .navbar-nav>li>.dropdown-menu { margin-top:0px; border-top-left-radius:0px; border-top-right-radius:0px; } .navbar-default .navbar-nav>li>a { width:200px; font-weight:bold; font-size: 16px; } .mega-dropdown { position: static !important; width:100%; } .mega-active:after { background: #0087F2; bottom: -8px; content: ' '; display: block; height: 15px; left: calc(50% - 5px); position: absolute; width: 15px; z-index: 99; -webkit-transform: rotate(-45deg); -webkit-transform-origin: 50% 50%; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } /*.mega-dropdown-menu:before {*/ /* content: "";*/ /* border-bottom: 15px solid #0087F2;*/ /* border-right: 17px solid transparent;*/ /* border-left: 17px solid transparent;*/ /* position: absolute;*/ /* top: -15px;*/ /* left: 285px;*/ /* z-index: 10;*/ /*}*/ /*.mega-dropdown-menu:after {*/ /* content: "";*/ /* border-bottom: 0px solid #ccc;*/ /* border-right: 19px solid transparent;*/ /* border-left: 19px solid transparent;*/ /* position: absolute;*/ /* top: 0px;*/ /* left: 283px;*/ /* z-index: 8;*/ /*}*/ .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: #fff; white-space: normal; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: underline; color: #fff; background-color: ; } .mega-dropdown-menu .dropdown-header { color: #fff; font-size: 14px; font-weight:bold; font-family: 'UniformRnd-bold', sans-serif; } .mega-dropdown-menu form { margin:3px 20px; } .mega-dropdown-menu .form-group { margin-bottom: 3px; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { text-decoration: underline; color: #fff; background:#1F96F4; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { text-decoration: underline; color: #fff; background-color: transparent; } .navbar-default .navbar-nav > li > a { color: #fff; } .dropdown-menu{ background-color: #0087F2; border: 0px solid rgba(0,0,0,.15); font-size: 12px; } .dropdown-menu-2{ left: 9%; } .dropdown-menu-3{ left: 28%; } .dropdown-menu-4{ left: 45%; } .mega-dropdown-menu-2c { width: 45%; } .head { width:50%;} .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } }

$(document).ready(function(){ // Closes any open mega menu // Expands dropdown when user hovers nav bar item $(".dropdown").mouseover(function() { $('.open').removeClass('open'); $(this).toggleClass('open'); }); // When mouse leaves close mega menu $(".dropdown").mouseout(function() { $('.open').removeClass('open'); }); // When main nav-bar link is hovered // Remove any triangles on page and add to hovered element $('.dropdown-toggle').mouseover(function(){ if ($(this).hasClass('mega-active')) return; $('.mega-active').removeClass('mega-active'); $(this).addClass('mega-active'); }); // If mouse leaves .nav or any of it's children // Remove triangle $('.nav').mouseleave(function(){ $('.mega-active').removeClass('mega-active'); }); //Remove any triangles from page if mouse enters nav link with no dropdown $('.no-dropdown').mouseenter(function(){ $('.mega-active').removeClass('mega-active'); }); // If any link within mega-dropdown is clicked // Remove triangle and menu // $(".mega-dropdown-menu a").click(function(){ // $('.mega-active').removeClass('mega-active'); // $('.open').removeClass('open'); // }); // If any nav bar link is clicked // Remove triangle and menu // $(".dropdown-toggle").click(function(){ // $('.mega-active').removeClass('mega-active'); // }); });