Bootstrap dropdown sub menu missing

Question

Bootstrap 3 is still at RC  but I was just trying to implement it  I couldn t figure out how to put a sub menu class  Even there is no class in css and even the new docs don t say anything about it  It was there in 2 x with class name as dropdown-submenu

User · Answer

Until today  9 jan 2014  the Bootstrap 3 still not support sub menu dropdown   I searched Google about responsive navigation menu and found this is the best i though   It is Smart menus http   www smartmenus org   I hope this is the way out for anyone who want navigation menu with multilevel sub menu   update 2015-02-17 Smart menus are now fully support Bootstrap element style for submenu  For more information please look at Smart menus website

User · Answer

Shprink s code helped me the most  but to avoid the dropdown to go off-screen i updated it to   JS      ul dropdown-menu  data-toggle dropdown    on  click   function event           Avoid following the href location when clicking     event preventDefault            Avoid having the menu to close when clicking     event stopPropagation            If a menu is already open we close it        ul dropdown-menu  data-toggle dropdown    parent   removeClass  open           opening the one you clicked on       this  parent   addClass  open         var menu     this  parent   find  ul        var menupos     menu  offset         if  menupos left   menu width    gt    window  width              var newpos   -  menu  width            menu css   left  newpos               else           var newpos     this  parent   width            menu css   left  newpos                  CSS  FROM background-color   eeeeee TO background-color   c5c5c5 - white font  amp  light background wasn t looking good    nav  open  gt  a   nav  open  gt  a hover   nav  open  gt  a focus     background-color   c5c5c5    border-color   428bca      I hope this helps people as much as it did for me   But i hope Bootstrap add the subs feature back ASAP

User · Answer

I make another solution for dropdown  Hope this is helpfull Just add this js script   lt script type  text javascript  gt  jQuery  document   ready function       jQuery  ul dropdown-menu  gt   dropdown parent   click function e        e preventDefault        e stopPropagation        if  jQuery this  hasClass  open2          jQuery this  removeClass  open2        else         jQuery this  addClass  open2                      lt   script gt    lt style type  text css  gt  open2 display block  position relative   lt  style gt

User · Answer

Updated 2018  The dropdown-submenu has been removed in Bootstrap 3 RC  In the words of Bootstrap author Mark Otto        Submenus just don t have much of a place on the web right now  especially the mobile web  They will be removed with 3 0  - https   github com twbs bootstrap pull 6342   But  with a little extra CSS you can get the same functionality   Bootstrap 4  navbar submenu on hover    navbar-nav li hover  gt  ul dropdown-menu       display  block     dropdown-submenu       position relative     dropdown-submenu gt  dropdown-menu       top 0      left 100       margin-top -6px      Navbar submenu dropdown hover Navbar submenu dropdown hover  right aligned  Navbar submenu dropdown click  right aligned  Navbar dropdown hover  no submenu     Bootstrap 3  Here is an example that uses 3 0 RC 1  http   bootply com 71520  Here is an example that uses Bootstrap 3 0 0  final   http   bootply com 86684  CSS   dropdown-submenu       position relative     dropdown-submenu gt  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 6px      border-radius 0 6px 6px 6px     dropdown-submenu hover gt  dropdown-menu       display block     dropdown-submenu gt 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  cccccc      margin-top 5px      margin-right -10px     dropdown-submenu hover gt a after       border-left-color  ffffff     dropdown-submenu pull-left       float none     dropdown-submenu pull-left gt  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      Sample Markup   lt div class  navbar navbar-default navbar-fixed-top  role  navigation  gt       lt div class  container  gt           lt div class  navbar-header  gt               lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-ex1-collapse  gt                     lt span class  sr-only  gt Toggle navigation lt  span gt                   lt span class  icon-bar  gt  lt  span gt                   lt span class  icon-bar  gt  lt  span gt                   lt span class  icon-bar  gt  lt  span gt               lt  button gt           lt  div gt           lt div class  collapse navbar-collapse navbar-ex1-collapse  gt               lt ul class  nav navbar-nav  gt                   lt li class  menu-item dropdown  gt                       lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Drop Down lt b class  caret  gt  lt  b gt  lt  a gt                       lt ul class  dropdown-menu  gt                           lt li class  menu-item dropdown dropdown-submenu  gt                               lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Level 1 lt  a gt                               lt ul class  dropdown-menu  gt                                   lt li class  menu-item   gt                                       lt a href     gt Link 1 lt  a gt                                   lt  li gt                                   lt li class  menu-item dropdown dropdown-submenu  gt                                       lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Level 2 lt  a gt                                       lt ul class  dropdown-menu  gt                                           lt li gt                                               lt a href     gt Link 3 lt  a gt                                           lt  li gt                                       lt  ul gt                                   lt  li gt                               lt  ul gt                           lt  li gt                       lt  ul gt                   lt  li gt               lt  ul gt           lt  div gt       lt  div gt   lt  div gt    P S  - Example in navbar that adjusts left position  http   bootply com 92442

User · Answer

skelly solution is good but will not work on mobile devices as the hover state won t work   I have added a little bit of JS to get the BS 2 3 2 behavior back   PS  it will work with the CSS you get there  http   bootply com 71520 though you can comment the following part   CSS      dropdown-submenu hover gt  dropdown-menu display block       JS      ul dropdown-menu  data-toggle dropdown    on  click   function event         Avoid following the href location when clicking   event preventDefault         Avoid having the menu to close when clicking   event stopPropagation         If a menu is already open we close it      ul dropdown-menu  data-toggle dropdown    parent   removeClass  open         opening the one you clicked on     this  parent   addClass  open          The result can be found on my WordPress theme  Top of the page   http   shprinkone julienrenaux fr

User · Answer

Comment to Skelly s really helpful workaround  in Bootstrap-sass 3 3 6  utilities scss  line 19   pull-left has float left  important  Since that  I recommend to use  important in his CSS as well    dropdown-submenu pull-left       float none  important

User · Answer

I bumped with this issue a few days ago  I tried many solutions and none really worked for me on the end i ended up creating an extenion override of the dropdown code of bootstrap  It is a copy of the original code with changes to the closeMenus function    I think it is a good solution since it doesn t affects the core classes of bootstrap js    You can check it out on gihub  https   github com djokodonev bootstrap-multilevel-dropdown

[css] Bootstrap dropdown sub menu missing

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to submenu