Bootstrap 4 Multilevel Dropdown Inside Navigation

Question

What s the easiest way to make a multilevel dropdown in Bootstrap 4  All the examples I managed to find on SO were either too messy or not included in nav   I ve tried just placing a dropdown inside a dropdown  but that doesn t seem like it s working  Can someone help me with this one   Here s the basic outline of my code    x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  integrity  sha384-rwoIResjU2yc3z8GV NPeZWAv56rSmLldC3R AZzGRnGxQQKnKkoFVhFQhNUwEyJ  crossorigin  anonymous  gt  x000D   lt script src  https   code jquery com jquery-3 1 1 slim min js  integrity  sha384-A7FZj7v d sdmMqp nOQwliLvUsJfDHW k9Omg a EheAdgtzNs3hpfag6Ed950n  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs tether 1 4 0 js tether min js  integrity  sha384-DztdAPBWPRXSA 3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  integrity  sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk 02D9phzyeVkE jo0ieGizqPLForn  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt nav class  navbar navbar-toggleable-md navbar-light bg-faded  gt  x000D     lt button class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbarNavDropdown  aria-controls  navbarNavDropdown  aria-expanded  false  aria-label  Toggle navigation  gt  x000D       lt span class  navbar-toggler-icon  gt  lt  span gt  x000D     lt  button gt  x000D     lt a class  navbar-brand  href     gt Navbar lt  a gt  x000D     lt div class  collapse navbar-collapse  id  navbarNavDropdown  gt  x000D       lt ul class  navbar-nav  gt  x000D         lt li class  nav-item active  gt  x000D           lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href     gt Link 1 lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item dropdown  gt  x000D           lt a class  nav-link dropdown-toggle  href  http   example com  id  navbarDropdownMenuLink  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt  x000D            Dropdown link x000D           lt  a gt  x000D           lt div class  dropdown-menu  aria-labelledby  navbarDropdownMenuLink  gt  x000D             lt a class  dropdown-item  href     gt Action lt  a gt  x000D             lt a class  dropdown-item  href     gt Another action lt  a gt  x000D             lt a class  dropdown-item  href     gt Something else here lt  a gt  x000D           lt  div gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Accepted Answer

I use the following piece of CSS and JavaScript. It uses an extra class dropdown-submenu. I tested it with Bootstrap 4 beta.

It supports multi level sub menus.

_x000D_

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {_x000D_
  if (!$(this).next().hasClass('show')) {_x000D_
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');_x000D_
  }_x000D_
  var $subMenu = $(this).next('.dropdown-menu');_x000D_
  $subMenu.toggleClass('show');_x000D_
_x000D_
_x000D_
  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {_x000D_
    $('.dropdown-submenu .show').removeClass('show');_x000D_
  });_x000D_
_x000D_
_x000D_
  return false;_x000D_
});

_x000D_

.dropdown-submenu {_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
.dropdown-submenu a::after {_x000D_
  transform: rotate(-90deg);_x000D_
  position: absolute;_x000D_
  right: 6px;_x000D_
  top: .8em;_x000D_
}_x000D_
_x000D_
.dropdown-submenu .dropdown-menu {_x000D_
  top: 0;_x000D_
  left: 100%;_x000D_
  margin-left: .1rem;_x000D_
  margin-right: .1rem;_x000D_
}

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">_x000D_
_x000D_
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>_x000D_
_x000D_
<nav class="navbar navbar-expand-lg navbar-light bg-light">_x000D_
  <a class="navbar-brand" href="#">Navbar</a>_x000D_
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">_x000D_
    <span class="navbar-toggler-icon"></span>_x000D_
  </button>_x000D_
  <div class="collapse navbar-collapse" id="navbarNavDropdown">_x000D_
    <ul class="navbar-nav">_x000D_
      <li class="nav-item active">_x000D_
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>_x000D_
      </li>_x000D_
      <li class="nav-item dropdown">_x000D_
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">_x000D_
          Dropdown link_x000D_
        </a>_x000D_
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">_x000D_
          <li><a class="dropdown-item" href="#">Action</a></li>_x000D_
          <li><a class="dropdown-item" href="#">Another action</a></li>_x000D_
          <li class="dropdown-submenu">_x000D_
            <a class="dropdown-item dropdown-toggle" href="#">Submenu</a>_x000D_
            <ul class="dropdown-menu">_x000D_
              <li><a class="dropdown-item" href="#">Submenu action</a></li>_x000D_
              <li><a class="dropdown-item" href="#">Another submenu action</a></li>_x000D_
_x000D_
_x000D_
              <li class="dropdown-submenu">_x000D_
                <a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>_x000D_
                <ul class="dropdown-menu">_x000D_
                  <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>_x000D_
                  <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>_x000D_
                </ul>_x000D_
              </li>_x000D_
              <li class="dropdown-submenu">_x000D_
                <a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>_x000D_
                <ul class="dropdown-menu">_x000D_
                  <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>_x000D_
                  <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>_x000D_
                </ul>_x000D_
              </li>_x000D_
_x000D_
_x000D_
_x000D_
            </ul>_x000D_
          </li>_x000D_
        </ul>_x000D_
      </li>_x000D_
    </ul>_x000D_
  </div>_x000D_
</nav>

_x000D_

User · Answer

Using official HTML without adding extra CSS styles and classes  it s like native support    Just add the following code     fn dropdown    function         var  bsDropdown     fn dropdown      return function config            if  typeof config      string   amp  amp  config      toggle        dropdown toggle trigged                 has-child-dropdown-show   removeClass  has-child-dropdown-show                  this  closest   dropdown   parents   dropdown   addClass  has-child-dropdown-show                      var ret    bsDropdown call   this   config             this  off  click bs dropdown       Turn off dropdown js click event  it will call  this toggle    internal         return ret                 function             dropdown  data-toggle  dropdown     on  click   function e              this  dropdown  toggle            e stopPropagation                    dropdown   on  hide bs dropdown   function e            if    this  is   has-child-dropdown-show                    this  removeClass  has-child-dropdown-show                e preventDefault                      e stopPropagation                  Dropdown of bootstrap can be easily changed to infinite level  It s a pity that they didn t do it   BTW  a hover version  https   github com dallaslu bootstrap-4-multi-level-dropdown  Here is a perfect demo  https   jsfiddle net dallaslu adky6jvs   works well with Bootstrap v4 4 1

User · Answer

This one works on Bootstrap 4 3 1    Jsfiddle  https   jsfiddle net ko6L31w4 1   The HTML code might be a little bit messy because I create a slightly complex dropdown menu for comprehensive test  otherwise everything is pretty straight forward    Js includes fewer ways to collapse opened dropdowns and CSS only includes minimal styles for full functionalities    x000D   x000D    function     x000D       ul dropdown-menu  data-toggle  dropdown     on  click   function event    x000D      event preventDefault    x000D      event stopPropagation    x000D       x000D        method 1  remove show from sibilings and their children under your first parent x000D       x000D       if     this  next   hasClass  show      x000D           x000D              this  parents   dropdown-menu   first   find   show   removeClass  show    x000D                    x000D        x000D        x000D        method 2  remove show from all siblings of all your parents x000D        this  parents   dropdown-submenu   siblings   find   show   removeClass  show    x000D       x000D        this  siblings   toggleClass  show    x000D       x000D       x000D        collapse all after nav is closed x000D        this  parents  li nav-item dropdown show   on  hidden bs dropdown   function e    x000D            dropdown-submenu  show   removeClass  show    x000D          x000D   x000D        x000D      x000D   dropdown-submenu   x000D    position  relative  x000D    x000D   x000D   dropdown-submenu gt  dropdown-menu   x000D    top  0  x000D    left  100   x000D    x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  integrity  sha384-ggOyR0iXCbMQv3Xipma34MD dH 1fQ784 j6cY iJTQUOhcWr7x9JvoRxT2MZw1T  crossorigin  anonymous  gt  x000D   lt script src  https   code jquery com jquery-3 3 1 slim min js  integrity  sha384-q8i X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 7 umd popper min js  integrity  sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 3 1 js bootstrap min js  integrity  sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf nJGzIxFDsf4x0xIM B07jRM  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   x000D   lt nav class  navbar navbar-expand-md navbar-light bg-white py-3 shadow-sm  gt  x000D     lt div class  container-fluid  gt  x000D       lt a href     class  navbar-brand font-weight-bold  gt Multilevel Dropdown lt  a gt  x000D       x000D     lt button type  button  data-toggle  collapse  data-target   navbarContent  aria-controls  navbars  aria-expanded  false  aria-label  Toggle navigation  class  navbar-toggler  gt  x000D       lt span class  navbar-toggler-icon  gt  lt  span gt  x000D     lt  button gt  x000D   x000D   x000D     lt div id  navbarContent  class  collapse navbar-collapse  gt  x000D         lt ul class  navbar-nav mr-auto  gt  x000D         x000D           lt  -- nav dropdown -- gt  x000D           lt li class  nav-item dropdown  gt  x000D           x000D             lt a href     data-toggle  dropdown  class  nav-link dropdown-toggle  gt Dropdown lt  a gt  x000D             lt ul class  dropdown-menu  gt  x000D               x000D               lt li gt  lt a href     class  dropdown-item  gt Some action lt  a gt  lt  li gt  x000D               x000D               lt  -- lvl 1 dropdown -- gt  x000D               lt li class  dropdown-submenu  gt  x000D                 lt a href     role  button  data-toggle  dropdown  class  dropdown-item dropdown-toggle  gt level 1 lt  a gt  x000D                 lt ul class  dropdown-menu  gt  x000D                   lt li gt  lt a href     class  dropdown-item  gt level 2 lt  a gt  lt  li gt  x000D                   x000D                   lt  -- lvl 2 dropdown -- gt  x000D                   lt li class  dropdown-submenu  gt  x000D                     lt a href     role  button  data-toggle  dropdown  class  dropdown-item dropdown-toggle  gt level 2 lt  a gt  x000D                     lt ul class  dropdown-menu  gt  x000D                       lt li gt  lt a href     class  dropdown-item  gt level 3 lt  a gt  lt  li gt  x000D                       x000D                       lt  -- lvl 3 dropdown -- gt   x000D                       lt li class  dropdown-submenu  gt  x000D                         lt a href     role  button  data-toggle  dropdown  class  dropdown-item dropdown-toggle  gt level 3 lt  a gt  x000D                         lt ul class  dropdown-menu  gt  x000D                           lt li gt  lt a href     class  dropdown-item  gt level 4 lt  a gt  lt  li gt  x000D                         lt  ul gt  x000D                       lt  li gt  x000D                       x000D                     lt  ul gt  x000D                   lt  li gt  x000D   x000D                   lt li gt  lt a href     class  dropdown-item  gt level 2 lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     class  dropdown-item  gt level 2 lt  a gt  lt  li gt  x000D                 lt  ul gt  x000D               lt  li gt  x000D               x000D               lt li gt  lt a href     class  dropdown-item  gt Some other action lt  a gt  lt  li gt  x000D               x000D               lt li class  dropdown-submenu  gt  x000D                 lt a href     role  button  data-toggle  dropdown  class  dropdown-item dropdown-toggle  gt level 1 lt  a gt  x000D                 lt ul class  dropdown-menu  gt  x000D                   x000D                   lt li class  dropdown-submenu  gt  x000D                     lt a href     role  button  data-toggle  dropdown  class  dropdown-item dropdown-toggle  gt level 2 lt  a gt  x000D                     lt ul class  dropdown-menu  gt  x000D                       lt li gt  lt a href     class  dropdown-item  gt level 3 lt  a gt  lt  li gt  x000D                       lt li gt  lt a href     class  dropdown-item  gt level 3 lt  a gt  lt  li gt  x000D                     lt  ul gt  x000D                   lt  li gt  x000D                   x000D                   lt li class  dropdown-submenu  gt  x000D                     lt a href     role  button  data-toggle  dropdown  class  dropdown-item dropdown-toggle  gt level 2 lt  a gt  x000D                     lt ul class  dropdown-menu  gt  x000D                       lt li gt  lt a href     class  dropdown-item  gt level 3 lt  a gt  lt  li gt  x000D                       lt li gt  lt a href     class  dropdown-item  gt level 3 lt  a gt  lt  li gt  x000D                     lt  ul gt  x000D                   lt  li gt  x000D   x000D                   lt li gt  lt a href     class  dropdown-item  gt level 2 lt  a gt  lt  li gt  x000D                   x000D                                   lt li class  dropdown-submenu  gt  x000D                     lt a href     role  button  data-toggle  dropdown  class  dropdown-item dropdown-toggle  gt level 2 lt  a gt  x000D                     lt ul class  dropdown-menu  gt  x000D                       lt li gt  lt a href     class  dropdown-item  gt level 3 lt  a gt  lt  li gt  x000D                       lt li gt  lt a href     class  dropdown-item  gt level 3 lt  a gt  lt  li gt  x000D                     lt  ul gt  x000D                   lt  li gt  x000D                   x000D                   lt li gt  lt a href     class  dropdown-item  gt level 2 lt  a gt  lt  li gt  x000D                 lt  ul gt  x000D               lt  li gt    x000D             lt  ul gt  x000D           lt  li gt  x000D   x000D           lt li class  nav-item  gt  lt a href     class  nav-link  gt About lt  a gt  lt  li gt  x000D           lt li class  nav-item  gt  lt a href     class  nav-link  gt Services lt  a gt  lt  li gt  x000D           lt li class  nav-item  gt  lt a href     class  nav-link  gt Contact lt  a gt  lt  li gt  x000D         lt  ul gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

I found this multidrop-down menu which work great in all device    Also  have hover style  It supports multi-level submenus with bootstrap 4    x000D   x000D     document   ready  function      x000D           navbar a dropdown-toggle    on   click   function   e     x000D          var  el      this    x000D          var  parent      this   offsetParent    dropdown-menu     x000D             this   parent   li    toggleClass   show     x000D   x000D          if     parent parent   hasClass   navbar-nav        x000D               el next   css     top    el 0  offsetTop   left    parent outerWidth   - 4      x000D            x000D               navbar-nav li show    not     this   parents   li      removeClass   show     x000D          return false  x000D           x000D       x000D   navbar-light  navbar-nav  nav-link   x000D      color  rgb 64  64  64   x000D    x000D   btco-menu li  gt  a   x000D      padding  10px 15px  x000D      color   000  x000D    x000D   x000D   btco-menu  active a focus  x000D   btco-menu li a focus   x000D   navbar  gt   show  gt  a focus  x000D      background  transparent  x000D      outline  0  x000D    x000D   x000D   dropdown-menu  show  gt   dropdown-toggle  after  x000D      transform  rotate -90deg   x000D    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  integrity  sha384-rwoIResjU2yc3z8GV NPeZWAv56rSmLldC3R AZzGRnGxQQKnKkoFVhFQhNUwEyJ  crossorigin  anonymous  gt  x000D   x000D   lt script src  https   code jquery com jquery-3 1 1 slim min js  integrity  sha384-A7FZj7v d sdmMqp nOQwliLvUsJfDHW k9Omg a EheAdgtzNs3hpfag6Ed950n  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs tether 1 4 0 js tether min js  integrity  sha384-DztdAPBWPRXSA 3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  integrity  sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk 02D9phzyeVkE jo0ieGizqPLForn  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt nav class  navbar navbar-toggleable-md navbar-light bg-faded btco-menu  gt  x000D       lt button class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbarNavDropdown  aria-controls  navbarNavDropdown  aria-expanded  false  aria-label  Toggle navigation  gt  x000D           lt span class  navbar-toggler-icon  gt  lt  span gt  x000D       lt  button gt  x000D       lt a class  navbar-brand  href     gt Navbar lt  a gt  x000D       lt div class  collapse navbar-collapse  id  navbarNavDropdown  gt  x000D           lt ul class  navbar-nav  gt  x000D               lt li class  nav-item active  gt  x000D                   lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D               lt  li gt  x000D               lt li class  nav-item  gt  x000D                   lt a class  nav-link  href     gt Features lt  a gt  x000D               lt  li gt  x000D               lt li class  nav-item  gt  x000D                   lt a class  nav-link  href     gt Pricing lt  a gt  x000D               lt  li gt  x000D               lt li class  nav-item dropdown  gt  x000D                   lt a class  nav-link dropdown-toggle  href  https   bootstrapthemes co  id  navbarDropdownMenuLink  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt Dropdown link lt  a gt  x000D                   lt ul class  dropdown-menu  aria-labelledby  navbarDropdownMenuLink  gt  x000D                       lt li gt  lt a class  dropdown-item  href     gt Action lt  a gt  lt  li gt  x000D                       lt li gt  lt a class  dropdown-item  href     gt Another action lt  a gt  lt  li gt  x000D                       lt li gt  lt a class  dropdown-item dropdown-toggle  href     gt Submenu lt  a gt  x000D                           lt ul class  dropdown-menu  gt  x000D                               lt li gt  lt a class  dropdown-item  href     gt Submenu action lt  a gt  lt  li gt  x000D                               lt li gt  lt a class  dropdown-item  href     gt Another submenu action lt  a gt  lt  li gt  x000D   x000D                               lt li gt  lt a class  dropdown-item dropdown-toggle  href     gt Subsubmenu lt  a gt  x000D                                   lt ul class  dropdown-menu  gt  x000D                                       lt li gt  lt a class  dropdown-item  href     gt Subsubmenu action lt  a gt  lt  li gt  x000D                                       lt li gt  lt a class  dropdown-item  href     gt Another subsubmenu action lt  a gt  lt  li gt  x000D                                   lt  ul gt  x000D                               lt  li gt  x000D                               lt li gt  lt a class  dropdown-item dropdown-toggle  href     gt Second subsubmenu lt  a gt  x000D                                   lt ul class  dropdown-menu  gt  x000D                                       lt li gt  lt a class  dropdown-item  href     gt Subsubmenu action lt  a gt  lt  li gt  x000D                                       lt li gt  lt a class  dropdown-item  href     gt Another subsubmenu action lt  a gt  lt  li gt  x000D                                   lt  ul gt  x000D                               lt  li gt  x000D                           lt  ul gt  x000D                       lt  li gt  x000D                   lt  ul gt  x000D               lt  li gt  x000D           lt  ul gt  x000D       lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

Updated 2018  Here is another variation on the Bootstrap 4 1 Navbar with multi-level dropdown  This one uses minimal CSS for the submenu  and can be re-positioned as desired     https   www codeply com go nG6iMAmI2X   dropdown-submenu     position  relative      dropdown-submenu  dropdown-menu     top  0    left  100     margin-top  -1px      jQuery to control display of submenus       dropdown-submenu  gt  a   on  click   function e        var submenu     this           dropdown-submenu  dropdown-menu   removeClass  show        submenu next   dropdown-menu   addClass  show        e stopPropagation             dropdown   on  hidden bs dropdown   function            hide any open menus when parent closes         dropdown-menu show   removeClass  show            See this answer for activating the Bootstrap 4 submenus on hover

User · Answer

The following is MultiLevel dropdown based on bootstrap4  I tried it was according to the bootstrap4 basic dropdown    x000D   x000D   dropdown-submenu  x000D      position  relative  x000D    x000D   dropdown-submenu a  after  x000D      transform  rotate -90deg   x000D      position  absolute  x000D      right  3px  x000D      top  40   x000D    x000D   dropdown-submenu hover  dropdown-menu   dropdown-submenu focus  dropdown-menu  x000D      display  flex  x000D      flex-direction  column  x000D      position  absolute  important  x000D      margin-top  -30px  x000D      left  100   x000D    x000D   media  max-width  992px    x000D       dropdown-menu  x000D          width  50   x000D        x000D       dropdown-menu  dropdown-submenu  x000D          width  auto  x000D        x000D    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  integrity  sha384-rwoIResjU2yc3z8GV NPeZWAv56rSmLldC3R AZzGRnGxQQKnKkoFVhFQhNUwEyJ  crossorigin  anonymous  gt  x000D   lt script src  https   code jquery com jquery-3 1 1 slim min js  integrity  sha384-A7FZj7v d sdmMqp nOQwliLvUsJfDHW k9Omg a EheAdgtzNs3hpfag6Ed950n  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs tether 1 4 0 js tether min js  integrity  sha384-DztdAPBWPRXSA 3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  integrity  sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk 02D9phzyeVkE jo0ieGizqPLForn  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt nav class  navbar navbar-toggleable-md navbar-light bg-faded  gt  x000D     lt button class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbarNavDropdown  aria-controls  navbarNavDropdown  aria-expanded  false  aria-label  Toggle navigation  gt  x000D       lt span class  navbar-toggler-icon  gt  lt  span gt  x000D     lt  button gt  x000D     lt a class  navbar-brand  href     gt Navbar lt  a gt  x000D     lt div class  collapse navbar-collapse  id  navbarNavDropdown  gt  x000D       lt ul class  navbar-nav mr-auto  gt  x000D         lt li class  nav-item active  gt  x000D           lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href     gt Link 1 lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item dropdown  gt  x000D           lt a class  nav-link dropdown-toggle  href  http   example com  id  navbarDropdownMenuLink  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt  x000D            Dropdown link x000D           lt  a gt  x000D           lt ul class  dropdown-menu  aria-labelledby  navbarDropdownMenuLink  gt  x000D             lt li gt  lt a class  dropdown-item  href     gt Action lt  a gt  lt  li gt  x000D             lt li gt  lt a class  dropdown-item  href     gt Another action lt  a gt  lt  li gt  x000D             lt li class  dropdown-submenu  gt  lt a class  dropdown-item dropdown-toggle  data-toggle  dropdown  href     gt Something else here lt  a gt  x000D               lt ul class  dropdown-menu  gt  x000D                 lt a class  dropdown-item  href     gt A lt  a gt  x000D                 lt a class  dropdown-item  href     gt b lt  a gt  x000D               lt  ul gt  x000D             lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

[html] Bootstrap 4: Multilevel Dropdown Inside Navigation

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4