<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="navigation"> <nav> <div class="visible-xs menu_header"> <span class="mobile_logo">Menu</span> <button class="btn menu_btn baars"> <span class="icon_bar"></span> <span class="icon_bar"></span> <span class="icon_bar"></span> </button> <div class="clear"></div> </div> <ul class="nav-ul"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> <li class="dropdown"><a href="#" class="dropdownlink">Link6</a> <ul class="dropdownmenu"> <li><a href="#">dropdown link1</a></li> <li><a href="#">dropdown link2</a> </li> </ul> </li> </ul> </nav> </div>

a:hover , a:focus{ text-decoration: none;} ul{ margin: 0px; padding: 0px;} ul li{ list-style-type: none;} clear{ clear: both;} /******Main navigation css start******/ .navigation{ background: #20aff2;} nav ul li{ display:inline-block;} nav ul li a{ font-size: 16px; color: #fff; padding: 12px 25px; display: inline-block;} nav ul li:hover a{ background: #323232; color: #fff;} /******Main navigation css end******/ @media only screen and (min-width: 768px){ /******common dropdown css start******/ .dropdownmenu , .subdropdownmenu{ opacity: 0; visibility: hidden; transition: all 0.5s ease;} .dropdown , .subdropdown{ position: relative; z-index: 1;} .dropdown li{ display:block;} .dropdown li a{ color: #fff; display:block; background: #323232;} .dropdown li:hover a, .dropdown li.active a{ background: #4a4949; color: #fff;} .dropdownmenu{ position: absolute; z-index: 1000; min-width: 195px; background: #323232;} .dropdownmenu.open{ opacity: 1; visibility: visible;} /*fisrt level menu start*/ .dropdownmenu{ top: 65px; left: 0; transition: all 0.5s ease; } .dropdownmenu.open{ top: 100%;} /*fisrt level menu end*/ /******common dropdown css end******/ } @media only screen and (max-width: 760px){ .navigation{ background: none;} .menu_header span{ padding-top: 5px; display:inline-block;} .menu_header button{ float:right;} .baars{ display:inline-block; margin-right: 5px; vertical-align:middle;} .baars .icon_bar{ width: 22px; height: 3px; margin-bottom:3px; background: #000; display: block; padding: 0px; transition: all 0.5s ease;} nav ul{ left:-100%; position: absolute; top: 34px; width: 100%; transition: all 0.5s ease; background: #f2f2f2; background: #20aff2;} nav ul.active{ left:0px; transition: all 0.5s ease;} nav ul li{ display:block;} nav ul li a{display:block; padding: 10px 15px;} .menu_header{ padding: 0px 15px; position: fixed; width: 100%; background: #f2f2f2; z-index:2; border-bottom:1px solid #ddd; top: 0px;} .dropdownmenu{ display: none; left: 0px; position:relative; top: 0px; transition:none;} .dropdown.open .dropdownmenu{ display: block;} .dropdownmenu li a{ padding: 10px 25px;} .cross .icon_bar:first-child{ -webkit-transform: rotate(-45deg) translate(-4px, 5px); transform: rotate(-45deg) translate(-4px, 5px); opacity: 1;} .cross .icon_bar{opacity: 0; color: #000;} .cross .icon_bar:last-child{ -webkit-transform: rotate(45deg) translate(-2.5px, -5px); transform: rotate(45deg) translate(-2.5px, -5px); opacity: 1;} }

$(document).ready(function(e) { if(screen.width >= 768) { $(".dropdown").hover(function(){ $(".dropdownmenu").toggleClass("open"); }); } }); $(document).ready(function(e) { if(screen.width <= 760) { $('.menu_btn').click(function(){ $('.nav-ul').toggleClass('active'); $('.baars').toggleClass('cross'); }); $(".dropdown").click(function(){ $(".dropdownmenu").slideToggle("open"); }); $('.nav-ul').click(function(e) { if( !$(e.target).hasClass('dropdownlink') ) { $(".nav-ul.active").removeClass("active"); $('.baars.cross').removeClass('cross'); $(".dropdownmenu").slideUp("open"); } }); } window.onresize = function(event) { document.location.reload(true); } });