Twitter Bootstrap Multilevel Dropdown Menu

by

Updated Answer

* Updated answer which support the v2.1.1** bootstrap version stylesheet.

**But be careful because this solution has been removed from v3

Just wanted to point out that this solution is not needed anymore as the latest bootstrap now supports multi-level dropdowns by default. You can still use it if you’re on older versions but for those who updated to the latest (v2.1.1 at the time of writing) it is not needed anymore. Here is a fiddle with the updated default multi-level dropdown straight from the documentation:

http://jsfiddle.net/2Smgv/2858/

Original Answer

There have been some issues raised on submenu support over at github and they are usually closed by the bootstrap developers, such as this one, so i think it is left to the developers using the bootstrap to work something out. Here is a demo i put together showing you how you can hack together a working sub-menu.

Relevant code

CSS

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

Created my own .sub-menu class to apply to the 2-level drop down menus, this way we can position them next to our menu items. Also modified the arrow to display it on the left of the submenu group.

Demo

More Related Contents:

  1. How can I make Bootstrap columns all the same height?
  2. Bootstrap dropdown sub menu missing
  3. Center content in responsive bootstrap navbar
  4. Order columns through Bootstrap4
  5. Center an element in Bootstrap Navbar
  6. Flushing footer to bottom of the page, twitter bootstrap
  7. How to overwrite styling in Twitter Bootstrap
  8. How to set up fixed width for ?
  9. Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap
  10. Modify twitter bootstrap navbar
  11. Bootstrap grid with fixed wrapper – Prevent columns from stacking up
  12. What is class=”mb-0″ in Bootstrap 4?
  13. Customize Bootstrap 4’s grid-system Breakpoints
  14. Prevent flex item from exceeding parent height and make scroll bar work
  15. Bootstrap 4 – Navbar items outside the collapse
  16. Bootstrap Element 100% Width
  17. Bootstrap change order of columns
  18. Twitter Bootstrap 3 – Panels of Equal Height in a Fluid Row
  19. Nested rows with bootstrap grid system?
  20. Django Forms and Bootstrap – CSS classes and
  21. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  22. Centering the image in Bootstrap
  23. LESS mixin a variable class name
  24. Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?
  25. In a bootstrap responsive page how to center a div
  26. Bootstrap – Removing padding or margin when screen size is smaller
  27. Shrinking navigation bar when scrolling down (bootstrap3)
  28. Vertically align Bootstrap badge inside heading
  29. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  30. How to change Bootstrap navbar collapse breakpoint

Leave a Comment