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

<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; }

Similar snippets: See More


tkvmonl 2013-11-08 13:26:46
    nice dropdown
PopArt Studio 2013-11-11 14:08:34
    Well done.
streetfire 2013-11-19 22:43:39
    Thank you! Very helpful! Glad to see some BS3 snipps coming now :)
Sarel 2013-11-20 08:16:58
    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...
Ivan 2013-11-30 21:59:30
    Current menu item unselect if I go to submenu. Correct behavior http://bootply.com/92442#
Cytex 2013-12-17 15:28:39
    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
OZ 2014-01-07 20:47:32
    I also would like to know hot to get rid of the arrow pointing to the right on the submenu.
maxsurguy 2014-01-08 02:47:52
    Remove this part:
OZ 2014-01-07 20:48:35
    And also, why is tabindex="-1" needed?
maxsurguy 2014-01-08 02:49:36
    That is so that when you press the TAB key on your keyboard, the item doesn't get focused.
OZ 2014-01-08 16:08:58
    thank you for being responsive, appreciate it.
matt 2014-01-09 01:05:57
    any way to have dropdown open to the left?
oj 2015-02-10 21:16:44
    .dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%; -> right: 100%
Kepa 2016-05-17 09:04:52
    great!! How about the caret on the left poninting that way? Thanks!
Yoza Wiratama 2014-01-09 02:53:31
    wow great sample, thanks and very cool.
Armada 2014-01-13 12:54:05
    Is it possible to open the top level dropdown to the right rather than down? Just like the sub-menu
Deano 2014-01-30 09:42:58
    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
Opencodez 2014-01-31 20:28:24
    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.
Cufe 2014-02-25 04:45:59
    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?
Artem 2015-08-12 06:56:37
    The same issue in Chrome
Artem 2015-08-12 07:39:25
    This helped me
zinobills 2016-02-22 09:32:56
    Add - right: auto; to the below part of the css
nneeggrroo 2014-03-06 18:02:26
    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!!
adi 2014-03-16 14:45:20
    How can we open 1st level menu on mouse hover, if any one know then let me know. Thanks
tera baap 2014-04-07 06:52:03
    not working with the navbar... please write correct code
jiggy1com 2014-09-12 23:26:27
    I have it working w/ the navbar. You just have to adjust this code accordingly.
Jonathan 2014-04-16 01:16:03
    Is it possible to indent the sub-menus when the nav becomes collapsed?
UserB 2014-06-28 08:07:02
    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.
Filipe Marotti 2014-11-06 11:53:39
    Yeap im look for submenu wich happens on a click too >.<
Lasse 2014-12-11 08:09:29
    If you are still looking, theres an example on jsfiddle:
constantinereport 2015-06-19 00:43:00
    Thank you so much
Battle Storm Tomasetti 2014-07-06 23:52:11
    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.
Simo 2014-07-10 15:03:20
    Great man!
Sungjoon Nam 2014-07-25 06:58:21
    It works with iOS well but it does not work with Android well.
amikrob 2014-08-15 14:14:55
    multi level dropdown does not work on Android platform
Hewbert Gabon 2014-08-17 16:05:26
    NOT working on Android. There is no way to tap/select the submenu items.
jiggy1com 2014-09-12 23:24:31
    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!
Me 2014-10-16 08:19:36
    This is great. Thanks you! :)
Marcos 2014-10-29 13:25:41
    Is there a way to have the submenu open for few seconds after ter mouse leaves it?
sufiawan 2014-11-03 10:03:22
    is anyone know how to open sub menu by clicking, not hovering? thanks
sukhdev 2014-12-09 12:05:35
    thanks :)
Filipe Marotti 2014-12-15 18:25:54
    Hi! How to add slide down effect on the sub-menu lvls?
Cù Kim Ngọc 2014-12-20 03:57:28
    Thank you so much !
SK 2014-12-24 13:33:24
    How can we get selected value from multilevel drop down?
Александар Голубовић 2015-01-08 22:15:00
    If you want this on material bootstrap https://github.com/FezVrast... you need to remove 'overflow: hidden;' from line 25074 in material-wfont.css.
Sushan 2015-01-28 04:45:00
    Where is responsive?
super_koza 2015-01-29 22:37:15
    Hello, could you write as I do to open the first element when hover?
Waseem 2015-02-04 13:38:41
    Thanks buddy ... Thanks A Lot!
Michael Ecklund 2015-03-04 18:31:45
    Thank you for this very useful example.
Myke Black 2015-03-10 13:59:49
    doesn't work in android 5 :(
hemant sankhla 2015-03-24 09:43:28
    i want the submenu always from top
Vandy 2015-03-31 14:36:50
    I cannot find the class dropdown-menu multi-level. I am using bootstrap 3.0.0. What can I do?
Syam 2015-04-02 16:20:45
    This is wonderful. Found the solution on the spot. Thank you!
Moritz 2015-04-25 18:16:47
    This has worked for me to open the submenu on click:
Diana 2016-01-25 00:14:37
    Thanks, it works
Mohammed Salauddin 2015-05-11 09:10:58
    Nice One Thanks.
DaveT 2015-05-15 16:11:12
    Super useful! Love it!!!!!!
Tom Mack 2015-05-19 15:56:21
    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...
kolookumo,DellCorp:Unbwoggable 2015-06-25 03:28:36
    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?
maxsurguy 2015-06-27 21:02:32
    You have to have Bootstrap version 3.0 for this snippet to work. Download from http://getbootstrap.com
vickey 2015-08-05 09:56:03
    Multi level dropdown menu in Bootstrap 3 not working in Android phone.....
Rafael Poggi 2015-08-12 19:45:20
    Doesn't it work inside nav bar?
vahid_MA 2015-08-21 15:56:26
    really nice dropdownmenu ,awesome but anyway to change it rtl
Tejaswini Pradeep 2015-08-26 12:03:37
    I want a scroll in dropdown menu using bootstrap.how to do it?
Chris 2015-08-28 12:00:25
    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?
Jim Panes 2015-09-09 02:25:38
    hello is there a way to make the main drop down to be on hover instead of clicking it?
Hector Gonzalez 2015-10-05 05:08:35
    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.
Isaac Ojeda 2015-10-27 17:30:23
    You are the best
Pramod Gharu 2015-11-03 11:28:26
    Thanks, it works, i change the navabar according to my subject.
Joaquin 2015-12-12 20:19:34
Mathieu Comeau 2015-12-22 21:34:48
    Any way to have them open automatically on the left, but only when there isn't enough place on the right ?
Mathieu Comeau 2016-01-05 23:45:10
    or the opposite, opening on the right by default but on the left if there isn't enough place
GelS Sy 2016-02-21 02:12:36
    any way to control the size of the dropdown like the white?
juan carlos rojas 2016-03-18 19:44:21
    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.
cuchi 2016-09-02 07:46:16
    The multilevel menu does not work properly on mobile devices. Rather than expending a second level menu, it hides everything back
LoliFirst 2016-10-30 22:42:03
    thank you!
Connor 2016-11-03 23:03:37
    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.
Mariano Martinez Peck 2016-11-29 21:23:41
    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?
Funky Dog 2017-01-10 17:43:05
    Does it work with BS 3.3.7 ?
Umut Dönmez 2017-01-19 12:16:44
    Ty for this snippet . U are awesome bro :)
GrayFox 2017-04-27 20:51:05
    Dear msurguy
cool stuff, can you make it scrollable? actually i'm facing bugs when i edit the css for scrolling
Samiul Haque Khan 2017-05-01 09:34:44
    Thanks for shareing

Commenting will be back soon.