<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"> <div class="row"> <h2 style="color: #1C9DDE; text-align: center;">Mega Menu By JASKARAN</h2> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">HOME</a></li> <li><a href="about.html">ABOUT</a></li> <li class="dropdown menu-large"> <a href="services.html" class="dropdown-toggle" data-toggle=""> Mega Dropdown menu</a> <ul class="dropdown-menu megamenu row"> <li class="col-sm-3"> <ul class="main-ul"> <li class="main-ul-li"><a href="#" class="nav-child main-ul-li-a">Main menu 1</a></li> <li class="main-ul-li"><a href="#" class="main-ul-li-a">Main menu 2</a></li> <li class="main-ul-li"><a href="#" class="main-ul-li-a">Main menu 3</a></li> <li class="main-ul-li"><a href="#" class="main-ul-li-a">Main menu 4</a> <ul class="inner-ul"> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Main menu 4.1</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Main menu 4.2</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Main menu 4.3</a></li> </ul> </li> <li class="main-ul-li"><a href="#" class="main-ul-li-a">Main menu 5</a> <ul class="inner-ul"> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Main menu 5.1</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Main menu 5.2</a> <ul class="sub-ul"> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Main menu 5.1.1</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Main menu 5.1.2</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Main menu 5.1.3</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Main menu 5.1.4</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Main menu 5.1.5</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="col-sm-3"> <ul class="main-ul"> <li class="main-ul-li"><a href="#" class="nav-child main-ul-li-a">Menu 1</a> </li> <li class="main-ul-li"><a href="#" class="main-ul-li-a">Menu 2</a> <ul class="inner-ul"> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Menu 2.1</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Menu 2.2</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Menu 2.3</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Menu 2.4</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Menu 2.5</a></li> </ul> </li> <li class="main-ul-li"><a href="#" class="main-ul-li-a">Menu</a> <ul class="inner-ul"> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Sub menu 1</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Sub menu 2</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Sub menu 3</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Sub menu 4</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Sub menu 5</a> <ul class="sub-ul"> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Sub menu 5.1</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Sub menu 5.2</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Sub menu 5.3</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Sub menu 5.4</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="col-sm-3"> <ul class="main-ul"> <li class="main-ul-li"><a href="#" class="nav-child main-ul-li-a">Menu 1</a> </li> <li class="main-ul-li"><a href="#" class="main-ul-li-a">Menu 2</a> <ul class="inner-ul"> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Menu 2.1</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Menu 2.2</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Menu 2.3</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Menu 2.4</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Menu 2.5</a></li> </ul> </li> <li class="main-ul-li"><a href="#" class="main-ul-li-a">Menu</a> <ul class="inner-ul"> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Sub menu 1</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Sub menu 2</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Sub menu 3</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Sub menu 4</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Sub menu 5</a> <ul class="sub-ul"> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Sub menu 5.1</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Sub menu 5.2</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Sub menu 5.3</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Sub menu 5.4</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="col-sm-3"> <ul class="main-ul"> <li class="main-ul-li"><a href="#" class="nav-child main-ul-li-a">Main menu 1</a></li> <li class="main-ul-li"><a href="#" class="main-ul-li-a">Main menu 2</a></li> <li class="main-ul-li"><a href="#" class="main-ul-li-a">Main menu 3</a></li> <li class="main-ul-li"><a href="#" class="main-ul-li-a">Main menu 4</a> <ul class="inner-ul"> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Main menu 4.1</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Main menu 4.2</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Main menu 4.3</a></li> </ul> </li> <li class="main-ul-li"><a href="#" class="main-ul-li-a">Main menu 5</a> <ul class="inner-ul"> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Main menu 5.1</a></li> <li class="inner-ul-li"><a href="#" class="inner-ul-li-a">Main menu 5.2</a> <ul class="sub-ul"> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Main menu 5.1.1</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Main menu 5.1.2</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Main menu 5.1.3</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Main menu 5.1.4</a></li> <li class="sub-ul-li"><a href="#" class="sub-ul-li-a">Main menu 5.1.5</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><a href="gallery.html">GALLERY</a></li> <li><a href="testimonial.html">TESTIMONIALS</a></li> <li><a href="contactus.html">CONTACT</a></li> </ul> </div> </div> </nav> </div> </div>

/* Mega Menu */ .navbar-inverse{ color: #fff; background-color: #ccc6c6; border-color: #aca1a2; } .navbar-inverse .navbar-nav > li > a{ color:#333; } .navbar-inverse .navbar-nav > .dropdown > a .caret{ border-top-color: #fff; border-bottom-color: #fff; } .navbar-inverse .navbar-brand{ color:#fff; } .menu-large { position: static !important; } .megamenu { left: 0%; padding: 20px 0; width: 76%; border: solid 1px grey; } .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; } .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; } } /* * Dropdown on hover */ @media (min-width:480px) { .dropdown:hover .dropdown-menu { display: block; } } .dropdown.menu-large li { padding: 0; } .main-ul .main-ul-li .main-ul-li-a { color: #a65c07; font-size: 16px; padding-bottom: 0; text-decoration: underline; text-transform: uppercase; font-weight: bold; } .inner-ul { padding: 0 0 0 20px; } .inner-ul .inner-ul-li { list-style-type: none; } .inner-ul .inner-ul-li .inner-ul-li-a { color: #333; font-size: 16px; } .sub-ul { padding: 0 0 0 5px; } .sub-ul .sub-ul-li { background: url("http://vignette1.wikia.nocookie.net/unmario/images/3/36/Right_arrow.png/revision/latest?cb=20091106235933")no-repeat; list-style-type: none; background-origin: padding-box !important; background-size: 15px auto; list-style-type: none; padding: 0 0 0 17px !important; background-position: left 4px; background-size: 12px; } .sub-ul .sub-ul-li .sub-ul-li-a { color: #333; font-size: 16px; } .dropdown.menu-large li a:hover { background: transparent; }

$(document).ready(function () { $(".dropdown").hover( function () { $('.dropdown-menu', this).stop().slideDown("slow"); }, function () { $('.dropdown-menu', this).stop().slideUp("slow"); }); });