<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="mega-nav"> <!-- 1 --> <div class="mega-nav-item dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Clothing <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="">All clothing</a> </li> <li> <a class="trigger right-caret">Careerwear</a> <ul class="dropdown-menu sub-menu"> <li> <a class="trigger right-caret">Men's careerwear</a> <ul class="dropdown-menu sub-menu"> <li><a href="#">Shirts</a></li> <li><a href="#">Ties</a></li> </ul> </li> <li> <a class="trigger right-caret">Women's careerwear</a> <ul class="dropdown-menu sub-menu"> <li><a href="#">Skirts</a></li> <li><a href="#">Blouses</a></li> </ul> </li> </ul> </li> <li><a href="#">Workwear</a></li> </ul> </div> <!-- 2 --> <div class="mega-nav-item dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Footwear <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="">All footwear</a> </li> <li> <a class="trigger right-caret">Boots</a> <ul class="dropdown-menu sub-menu"> <li> <a href="#">Men's boots</a> </li> <li> <a href="#">Women's boots</a> </li> </ul> </li> </ul> </div> </div>

.mega-nav { background: #ccc; width: 100%; font-size: 14px; color: black; padding: 15px 0; } .mega-nav-item { display: inline-block; position: relative; } @media (min-width: 992px) { .dropdown-menu { width: 100%; } } .dropdown-menu>li { position:relative; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */ -o-user-select: none; user-select: none; cursor:pointer; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; display:none; margin-top: -1px; border-top-left-radius:0; border-bottom-left-radius:0; border-left-color:#fff; box-shadow:none; } .right-caret:after,.left-caret:after { content:""; border-bottom: 5px solid transparent; border-top: 5px solid transparent; display: inline-block; height: 0; vertical-align: middle; width: 0; margin-left:5px; } .right-caret:after { border-left: 5px solid #ffaf46; } .left-caret:after { border-right: 5px solid #ffaf46; }

$(function(){ $(".dropdown-menu > li > a.trigger").on("click",function(e){ var current=$(this).next(); var grandparent=$(this).parent().parent(); if($(this).hasClass('left-caret')||$(this).hasClass('right-caret')) $(this).toggleClass('right-caret left-caret'); grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret'); grandparent.find(".sub-menu:visible").not(current).hide(); current.toggle(); e.stopPropagation(); }); $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){ var root=$(this).closest('.dropdown'); root.find('.left-caret').toggleClass('right-caret left-caret'); root.find('.sub-menu:visible').hide(); }); });