"Multi level dropdown menu BS3"
Bootstrap 3.0.0 Snippet by msurguy

<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="container"> <div class="row"> <h2>Multi level dropdown menu in Bootstrap 3</h2> <hr> <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <li><a href="#">Some action</a></li> <li><a href="#">Some other action</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">Hover me for more options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Second level</a></li> <li class="dropdown-submenu"> <a href="#">Even More..</a> <ul class="dropdown-menu"> <li><a href="#">3rd level</a></li> <li><a href="#">3rd level</a></li> </ul> </li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> </ul> </li> </ul> </div> </div> </div>
.dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }

Related: See More


Questions / Comments:

Great solution to a second level dropdown. The line "Hover me for more options" comes with an arrow - for me, the arrow is not aligned properly. Its at the bottom of the line. Where does this arrow come from - I can't find it in the code.

kwongchung (0) - 2 months ago - Reply 0


Thanks for shareing

Samiul Haque Khan (0) - 1 year ago - Reply 0


Dear msurguy
cool stuff, can you make it scrollable? actually i'm facing bugs when i edit the css for scrolling

overflow-y:scroll

it makes disappear submenues

thanks ;)

GrayFox (0) - 1 year ago - Reply 0


Ty for this snippet . U are awesome bro :)

Umut Dönmez (0) - 1 year ago - Reply 0


Does it work with BS 3.3.7 ?

Funky Dog (0) - 1 year ago - Reply 0


Did someone finally found a way so that the menu (via JS I guess) would either open to the left or to the right depending on how much space it has on each side? In other words...smartly choose where to open.... I need this and I have no clue how to make it work.
Or at least...somehow make the horizontal scroll to autoscroll to the right (too see the right most submenu) so that I don't have to do it by hand?

Thanks in advance.

Mariano Martinez Peck (0) - 1 year ago - Reply 0


Thanks for this, super simple. I'm having an issue with the placement of the submenu though. It is automatically aligning it with the top of the parent menu/bottom of the button instead of the list item. When I have alot of items in the parent menu and try to select one on the lower part of the menu, the submenu opens too far up to access it without losing the submenu.

It works correctly in the example on this page, but even when I copy/paste the html and css from above, it doesn't work on my stuff(bootstrap 3). Anybody have any ideas?

Connor (0) - 1 year ago - Reply 0


thank you!

LoliFirst (0) - 1 year ago - Reply 0


The multilevel menu does not work properly on mobile devices. Rather than expending a second level menu, it hides everything back

cuchi (0) - 1 year ago - Reply 0


Buenas tardes, ya tenia rato que habia encontrado tu página, se me habia olvidado cometar. Muchisimas gracias me ha servido mucho tu código.

juan carlos rojas (0) - 2 years ago - Reply 0


any way to control the size of the dropdown like the white?

GelS Sy (0) - 2 years ago - Reply 0


Any way to have them open automatically on the left, but only when there isn't enough place on the right ?

Mathieu Comeau (0) - 2 years ago - Reply 0


or the opposite, opening on the right by default but on the left if there isn't enough place

Mathieu Comeau (0) - 2 years ago - Reply 0


Great!!!!!!!!!

Joaquin (0) - 2 years ago - Reply 0


Thanks, it works, i change the navabar according to my subject.

Pramod Gharu (0) - 2 years ago - Reply 0


You are the best

Isaac Ojeda (0) - 2 years ago - Reply 0


im sorry for my english but i try to test te example and not runing only had the html and css, but inthe label href indicate a page.html. and then redirect to him.mienswhile dont expose the menu.

Hector Gonzalez (0) - 2 years ago - Reply 0


hello is there a way to make the main drop down to be on hover instead of clicking it?

Jim Panes (0) - 2 years ago - Reply 0


This works great on desktop / tablet, but on mobile (iPhone), if i click on the dropdown, it shows the drop down options and then hides the drop down menu straight away. How can I change this?

Chris (0) - 2 years ago - Reply 0


I want a scroll in dropdown menu using bootstrap.how to do it?

Tejaswini Pradeep (0) - 2 years ago - Reply 0


really nice dropdownmenu ,awesome but anyway to change it rtl

vahid_MA (0) - 2 years ago - Reply 0


Doesn't it work inside nav bar?

Rafael Poggi (0) - 2 years ago - Reply 0


Multi level dropdown menu in Bootstrap 3 not working in Android phone.....

vickey (0) - 2 years ago - Reply 0


this stuff doesnt work for me but i made reference to bootstrap file as <script src="bootstrap-2.0.2.js"></script> with similar html & css structure? what else do i need?

kolookumo,DellCorp:Unbwoggable (0) - 3 years ago - Reply 0


You have to have Bootstrap version 3.0 for this snippet to work. Download from http://getbootstrap.com

maxsurguy (0) - 3 years ago - Reply 0


I'm curious if anyone knows of a submenu add-on to bootstrap 3.0+ that utilizes just CSS ... javascript functions are great for control but they're not applicable when you're dynamically building your html elements on nav or menus via javascript...

Tom Mack (0) - 3 years ago - Reply 0


Super useful! Love it!!!!!!

DaveT (0) - 3 years ago - Reply 0


Nice One Thanks.

Mohammed Salauddin (0) - 3 years ago - Reply 0


This has worked for me to open the submenu on click:
$(document).ready(function(){
$('.dropdown-submenu>a').unbind('click').click(function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});

of course, you need to comment out the CSS part opening the submenu on hover:
/*.dropdown-submenu:hover>.dropdown-menu {
display: block;
}*/

Moritz (0) - 3 years ago - Reply 0


Thanks, it works

Diana (0) - 2 years ago - Reply 0


This is wonderful. Found the solution on the spot. Thank you!

Syam (0) - 3 years ago - Reply 0


I cannot find the class dropdown-menu multi-level. I am using bootstrap 3.0.0. What can I do?

Vandy (0) - 3 years ago - Reply 0


i want the submenu always from top

hemant sankhla (0) - 3 years ago - Reply 0


doesn't work in android 5 :(

Myke Black (0) - 3 years ago - Reply 0


Thank you for this very useful example.

If anyone is working within a "dropup" instead of your typical "dropdown" ...

Using this snippet should correct your "flyout" menu from displaying incorrectly:



.dropup .dropdown-submenu > .dropdown-menu{
bottom: auto;
margin-bottom: 2px;
}

Michael Ecklund (0) - 3 years ago - Reply 0


Thanks buddy ... Thanks A Lot!

Waseem (0) - 3 years ago - Reply 0


Hello, could you write as I do to open the first element when hover?

super_koza (0) - 3 years ago - Reply 0


Where is responsive?

Sushan (0) - 3 years ago - Reply 0


If you want this on material bootstrap https://github.com/FezVrast... you need to remove 'overflow: hidden;' from line 25074 in material-wfont.css.

Александар Голубовић (0) - 3 years ago - Reply 0


How can we get selected value from multilevel drop down?

SK (0) - 3 years ago - Reply 0


Thank you so much !

Cù Kim Ngọc (0) - 3 years ago - Reply 0


Hi! How to add slide down effect on the sub-menu lvls?

Filipe Marotti (0) - 3 years ago - Reply 0


thanks :)

sukhdev (0) - 3 years ago - Reply 0


is anyone know how to open sub menu by clicking, not hovering? thanks

sufiawan (0) - 3 years ago - Reply 0


Is there a way to have the submenu open for few seconds after ter mouse leaves it?

Marcos (0) - 3 years ago - Reply 0


This is great. Thanks you! :)

Me (0) - 3 years ago - Reply 0


Nice work my man! I agree with the others: easy to implement (I think I had it running in under an hour (had to tweak my existing code that built the menu), but there should be a way for the menus to load on the other side. I'm sure we (developers) can append to your code and add like .flyoutLeft and .flyoutRight and add the necessary styles. However, to make it "smart" that would probably take some creative JS. Ah, a project for me to work on tonite!

jiggy1com (0) - 3 years ago - Reply 0


NOT working on Android. There is no way to tap/select the submenu items.

Hewbert Gabon (0) - 3 years ago - Reply 0


multi level dropdown does not work on Android platform

amikrob (0) - 3 years ago - Reply 0


It works with iOS well but it does not work with Android well.

Sungjoon Nam (0) - 3 years ago - Reply 0


Great man!

Simo (0) - 4 years ago - Reply 0


My drop down on the second level (didnt need third) wont open to the right. I got it to indent downwards into the menu. Nothing I try gets it to open to the right like yours. What specific CSS properties control this? Otherwise thanks for the code I was having trouble doing this on my own.

THis is in the nav bar btw

Battle Storm Tomasetti (0) - 4 years ago - Reply 0


Hi, great dropdown, however, just looking for a simple way to have the dropdown on the mulitilevel to happen on a click, not on hover, this is a pain on mobile. Thanks.

UserB (0) - 4 years ago - Reply 0


Yeap im look for submenu wich happens on a click too >.<

Filipe Marotti (0) - 3 years ago - Reply 0


If you are still looking, theres an example on jsfiddle:
http://jsfiddle.net/chirayu...

Lasse (0) - 3 years ago - Reply 0


Thank you so much

constantinereport (0) - 3 years ago - Reply 0


Is it possible to indent the sub-menus when the nav becomes collapsed?

Jonathan (0) - 4 years ago - Reply 0


not working with the navbar... please write correct code

tera baap (0) - 4 years ago - Reply 0


I have it working w/ the navbar. You just have to adjust this code accordingly.

jiggy1com (0) - 3 years ago - Reply 0


How can we open 1st level menu on mouse hover, if any one know then let me know. Thanks

adi (0) - 4 years ago - Reply 0


Many Thanks for this... also i would like to know some way to highlight the item selected... I mean the same effect of this sites in the main multi level menu: http://homedepot.com or http://www.walmart.com/ any comments? Thanks!!

nneeggrroo (0) - 4 years ago - Reply 0


Is anyone else having an issue where the sub menu does not expand to fit longer menu items? If so, has anyone figured out a fix for this?
Thanks

Cufe (0) - 4 years ago - Reply 0


The same issue in Chrome

Artem (0) - 2 years ago - Reply 0


This helped me

@media (min-width:768px) {
.navbar-right .dropdown-menu {
right: auto;
left: 100%;
}
}

Artem (0) - 2 years ago - Reply 0


Add - right: auto; to the below part of the css

.dropdown-submenu>.dropdown-menu {

top: 0;

left: 100%;

margin-top: -6px;

margin-left: -1px;

-webkit-border-radius: 0 6px 6px 6px;

-moz-border-radius: 0 6px 6px;

border-radius: 0 6px 6px 6px;

}

Like this:

.dropdown-submenu>.dropdown-menu {

top: 0;

left: 100%;

right: auto;

margin-top: -6px;

margin-left: -1px;

-webkit-border-radius: 0 6px 6px 6px;

-moz-border-radius: 0 6px 6px;

border-radius: 0 6px 6px 6px;

}

zinobills (0) - 2 years ago - Reply 0


This is exactly what I am looking for, my Bootstrap 3 based theme is pending for review due to this. I will add it now.

Opencodez (0) - 4 years ago - Reply 0


This is fantastic. Easy to implement too. Please can you add an option to have the menu appearing on the left too. At the moment it only appears on the right. Many thanks

Deano (0) - 4 years ago - Reply 0


Is it possible to open the top level dropdown to the right rather than down? Just like the sub-menu

Armada (0) - 4 years ago - Reply 0


wow great sample, thanks and very cool.

Yoza Wiratama (0) - 4 years ago - Reply 0


any way to have dropdown open to the left?

matt (0) - 4 years ago - Reply 0


.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%; -> right: 100%

oj (0) - 3 years ago - Reply 0


great!! How about the caret on the left poninting that way? Thanks!

Kepa (0) - 2 years ago - Reply 0


And also, why is tabindex="-1" needed?

OZ (0) - 4 years ago - Reply 0


That is so that when you press the TAB key on your keyboard, the item doesn't get focused.

maxsurguy (0) - 4 years ago - Reply 0


thank you for being responsive, appreciate it.

OZ (0) - 4 years ago - Reply 0


I also would like to know hot to get rid of the arrow pointing to the right on the submenu.

OZ (0) - 4 years ago - Reply 0


Remove this part:

maxsurguy (0) - 4 years ago - Reply 0


Really quick (stupid) question, in the dropdown submenu a arrow pointing right is automatically added (when given the class dropdown-submenu}. I can't seem to find out how (where) this is added in the CSS code. In my it results in a gray arrow (pointing right) and when hovering over the link, the submenu opens gives the link a gray hover background and changes the color of the arrow in white. I would like to change the white to black.
I just added this snippet to the bootstrap.css v3.0.3

Cytex (0) - 4 years ago - Reply 0


Current menu item unselect if I go to submenu. Correct behavior http://bootply.com/92442#

Ivan (0) - 4 years ago - Reply 0


Very cool! We're actually looking for something like this. We're on BS2 though, and I tested your code with that... works fine. You can add 2.3.2 as a tag as well ;) Here's the fiddle: http://jsfiddle.net/sarelvd...

Sarel (0) - 4 years ago - Reply 0


Thank you! Very helpful! Glad to see some BS3 snipps coming now :)

streetfire (0) - 4 years ago - Reply 0


Well done.

PopArt Studio (0) - 4 years ago - Reply 0


nice dropdown

tkvmonl (0) - 4 years ago - Reply 0