"Large Dropdown Menu"
Bootstrap 3.0.0 Snippet by diglog

<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 class="navbar navbar-default navbar-static"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-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="#">Large Dropdown Menu</a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown dropdown-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu dropdown-menu-large row"> <li class="col-sm-3"> <ul> <li class="dropdown-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="dropdown-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="dropdown-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="dropdown-header">Button dropdowns</li> <li><a href="#">Single button dropdowns</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-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="dropdown-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="dropdown-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> </li> </ul> </div><!-- /.nav-collapse --> </nav>
.dropdown-large { position: static !important; } .dropdown-menu-large { margin-left: 16px; margin-right: 16px; padding: 20px 0px; } .dropdown-menu-large > li > ul { padding: 0; margin: 0; } .dropdown-menu-large > li > ul > li { list-style: none; } .dropdown-menu-large > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: normal; } .dropdown-menu-large > li ul > li > a:hover, .dropdown-menu-large > li ul > li > a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .dropdown-menu-large .disabled > a, .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus { color: #999999; } .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .dropdown-menu-large .dropdown-header { color: #428bca; font-size: 18px; } @media (max-width: 768px) { .dropdown-menu-large { margin-left: 0 ; margin-right: 0 ; } .dropdown-menu-large > li { margin-bottom: 30px; } .dropdown-menu-large > li:last-child { margin-bottom: 0; } .dropdown-menu-large .dropdown-header { padding: 3px 15px !important; } }

Related: See More


Questions / Comments:

With dropdrown-menu as position:static is complicated for making dropdown center

Adriano Resende () - 7 years ago - Reply 0


How to use tab section in this mega menu?

Santosh Neupane () - 7 years ago - Reply 0


It is not working with Bootstrap 3.3.4. Can anyone resolve this how to make it work?

Anuj Garg () - 8 years ago - Reply 0


How can I enable vertical scroll if page is shorter than menu??

Mike () - 9 years ago - Reply 0


I used this menu and placed PHP Code to generate my menus's for me !

see Link for image if my issues - http://guestlodge.za.org/we...

The area marked with red is where the second row of menu items are supposed to be and nothing ?

there are four sets of menus below what is visible now that are just disappearing into nothingness

i used the standard menu as per the sample above

Any help appreciated
Thank you
Sam

Charles Harris () - 9 years ago - Reply 0


you saved my deadline thanks :D

Hasan Zahran () - 9 years ago - Reply 0


works fine! but try this .dropdown-menu-large { /*margin-left: inherit;*/ left:inherit; margin-right: 16px;padding: 20px 0px; } to better alignment :) thx!

pmendonca () - 9 years ago - Reply 0


it is great! however, how do you deal with the dropdown list in the right corner?

Wei () - 9 years ago - Reply 0


how can i open collapse able menu under any link which expand more child but on click ....

David () - 9 years ago - Reply 0


Excellent job!! thanks!

Luis Abarca () - 10 years ago - Reply 0


Hi there, after opening the large menu, can I set the mouse click event not to close the toggle when click in the air (click nothing).

Alfred Yeap () - 10 years ago - Reply 0


Use Javascript for margin left

$(document).ready(function (){
$('.dropdown-menu-large').css({'margin-left': $('#mega_drop_holder').position().left});
});

$( window ).resize(function() {
$('.dropdown-menu-large').css({'margin-left': $('#mega_drop_holder').position().left});
});

Gonzalo () - 10 years ago - Reply 0


can any one tell me,how can i get only dropdown menu,not navbar...help me plzz

sameer () - 10 years ago - Reply 0


me too

Yoza Wiratama () - 10 years ago - Reply 0


for dropdown check our this

<ul class="nav nav-tabs">
<li class="dropdown">

Dropdown


<ul class="dropdown-menu">

</ul>
</li>
</ul>

Noushad Ali () - 9 years ago - Reply 0


nice menu drop-down thanks

allyssonharry () - 10 years ago - Reply 0


Is there one that works with Bootstrap 2?

joaiwna () - 10 years ago - Reply 0


This is great, but I need this with mouse over to open sub menu. Does anyone knows how to convert it?

bojanpejanovic () - 10 years ago - Reply 0


.dropdown:hover .dropdown-menu { display: block; }

AJM () - 8 years ago - Reply 0


Great done! Is it possible to make the large menu match container size?

Darren Li () - 10 years ago - Reply 0


Does anyone have an example page with menus on the left and right and of different sizes? If I remove columns from the menu the positioning is wrong.

Mike Stoddart () - 10 years ago - Reply 0


Thanks alot!

Alex () - 10 years ago - Reply 0


Great !!!

บัณฑิต แสนคำภา () - 10 years ago - Reply 0


This is awesome! Thanks!

Mijo Džalto () - 10 years ago - Reply 0


Great solution, what i really needed, but i really wish it adopts the location acroding to the navbar possition.

Yoosuf () - 10 years ago - Reply 0


Set .dropdown-menu{left:inherit}

Shageevan Sachithanandan () - 10 years ago - Reply 0