<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 ----------> <div class="mega-menu-wrapper"> <ul class="mega-menu row"> <li class="col-sm-3"> <ul> <li class="mega-menu-header">Glyphicons</li> <li><a href="#">Available glyphs</a></li> <li class="disabled"><a href="#">How to use</a></li> <li><a href="#">Examples</a></li> <li class="divider"></li> <li class="mega-menu-header">Dropdowns</li> <li><a href="#">Example</a></li> <li><a href="#">Aligninment options</a></li> <li><a href="#">Headers</a></li> <li><a href="#">Disabled menu items</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="mega-menu-header">Button groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Button toolbar</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Nesting</a></li> <li><a href="#">Vertical variation</a></li> <li class="divider"></li> <li class="mega-menu-header">Button dropdowns</li> <li><a href="#">Single button dropdowns</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="mega-menu-header">Input groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Checkboxes and radio addons</a></li> <li class="divider"></li> <li class="mega-menu-header">Navs</li> <li><a href="#">Tabs</a></li> <li><a href="#">Pills</a></li> <li><a href="#">Justified</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="mega-menu-header">Navbar</li> <li><a href="#">Default navbar</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Text</a></li> <li><a href="#">Non-nav links</a></li> <li><a href="#">Component alignment</a></li> <li><a href="#">Fixed to top</a></li> <li><a href="#">Fixed to bottom</a></li> <li><a href="#">Static top</a></li> <li><a href="#">Inverted navbar</a></li> </ul> </li> </ul> </div>

.mega-menu-wrapper > .mega-menu { display: block; } .mega-menu { margin-left: 16px; margin-right: 16px; padding: 20px 0px; list-style: outside none none; } .mega-menu > li > ul { padding: 0; margin: 0; } .mega-menu > li > ul > li { list-style: none; } .mega-menu > li > ul > li > a { display: block; padding-top: 3px; padding-bottom: 3px; padding-left: 0px; padding-right: 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: normal; } .mega-menu > li ul > li > a:hover, .mega-menu > li ul > li > a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .mega-menu .disabled > a, .mega-menu .disabled > a:hover, .mega-menu .disabled > a:focus { color: #999999; } .mega-menu .disabled > a:hover, .mega-menu .disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .mega-menu .mega-menu-header { margin-top: 10px; color: #428bca; font-size: 18px; }