<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".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> <a class="navbar-brand" href="#">βeta</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Valuation <span class="caret"></span></a> <div class="dropdown-menu multi-column" role="menu"> </div> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Positions <span class="caret"></span></a> <div class="dropdown-menu multi-column" role="menu"> </div> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Inventory <span class="caret"></span></a> <div class="dropdown-menu multi-column" role="menu"> </div> </li> <li class="active dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Asset Models <span class="caret"></span></a> <div class="dropdown-menu multi-column" role="menu"> </div> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Reference <span class="caret"></span></a> <ul class="dropdown-menu multi-column" role="menu"> <li> <div class="row"> <div class="col-sm-6"> <ul class="dropdown-menu"> <li><a href="#">Affiliates</a></li> <li><a href="#">Basis Products</a></li> <li><a href="#">Books</a></li> <li><a href="#">Brokers</a></li> <li><a href="#">Calendars</a></li> <li><a href="#">Carriers</a></li> <li><a href="#">Classes</a></li> <li><a href="#">Counterparties</a></li> </ul> </div> <div class="col-sm-6"> <ul class="dropdown-menu"> <li><a href="#">Disaggregation Indicators</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Products</a></li> <li><a href="#">Program Changes</a></li> <li><a href="#">Publishers</a></li> <li><a href="#">Regions</a></li> <li><a href="#">Strategies</a></li> <li><a href="#">Traders</a></li> </ul> </div> </div> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <span class="caret"></span></a> <div class="dropdown-menu multi-column" role="menu"> </div> </li> <li><a href="#about">About</a></li> <li class="navbar-right"><span>NAOXY/xholcomj</span></li> </ul> </div> <!--/.nav-collapse --> </div> </nav>

.dropdown-menu.multi-column { width: 400px; } .dropdown-menu.multi-column .dropdown-menu { display: block !important; position: static !important; margin: 0 !important; border: none !important; box-shadow: none !important; }