<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <nav id="top-nav"> <ul class=""> <li><a href="#">Home</a></li> <li class="dropdown"><a href="#">More <span>♦</span> </a> <ul class="dropdown-menu"> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> </ul> </li> <li><a href="#">About</a></li> <li class="dropdown"><a href="#">More <span>♦</span></a> <ul class="dropdown-menu"> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li class="dropdown"><a href="#">Sub Item 3 <span>♦</span></a> <ul class="dropdown-menu"> <li><a href="#">More Sub Item 1</a></li> <li class="dropdown"><a href="#">More Sub Item 2 <span>♦</span></a> <ul class="dropdown-menu"> <li><a href="#">Other Sub Item 1</a></li> <li><a href="#">Other Sub Item 2</a></li> <li><a href="#">Other Sub Item 3</a></li> <li><a href="#">Other Sub Item 4</a></li> </ul> </li> <li><a href="#">More Sub Item 3</a></li> <li><a href="#">More Sub Item 4</a></li> </ul> </li> <li><a href="#">Sub Item 4</a></li> </ul> </li> </ul> </nav>

*{margin: 0;padding: 0;} a, a:hover{text-decoration: none;} #top-nav{min-height: 50px;} #top-nav ul{ background-color: #010101; list-style: none; } #top-nav ul li{ display: inline-block; } #top-nav ul li a{ display: block; color:#f9f9f9; padding: 10px 20px; } #top-nav ul li a:hover{background-color: #666;} /* Dropdown */ li.dropdown{position: relative;} ul.dropdown-menu{ position: absolute; min-width: 120px; } ul.dropdown-menu li{ display: block !important; white-space: nowrap; } /* Sub Dropdown */ ul.dropdown-menu ul.dropdown-menu{ left: 100%; top: 0; background-color: #f00 !important; } /* Display none by Default */ ul.dropdown-menu{ display: none; }

$(function(){ $('li.dropdown > a').on('click',function(event){ event.preventDefault() $(this).parent().find('ul').first().toggle(300); $(this).parent().siblings().find('ul').hide(200); //Hide menu when clicked outside $(this).parent().find('ul').mouseleave(function(){ var thisUI = $(this); $('html').click(function(){ thisUI.hide(); $('html').unbind('click'); }); }); }); });