CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
aa003
aa003

Reputation: 131

Bootstrap 3 Dropdown sub menu not working

Sub menu block is always visible even before the hover. Unable to understand what is missing:-

**HTML**

<li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
            Menu 
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Item1</a></li>
            <li class="dropdown-submenu">
                <a href="#">Item2</a>
                <ul class="dropdown-menu" >
                    <li>
                        <a href="#">Item2.1</a>
                    </li>
                    <li>
                        <a href="#">Item2.2</a>
                    </li>
                </ul>
            </li>
          </ul>
        </li>

CSS

    /* dropdown sub menu support for Bootsrap 3 */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 5px;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

When I hover the main menu submenu block of dropdown is always visible ?

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

.dropdown-submenu > a:after {
  position: absolute;
  display: inline-block;
  font-size: 14px;
  right: 7px;
  top: 7px;
  font-family: FontAwesome;
  height: auto;
  content: "\f105";
  font-weight: 300;
}

.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
}

I am using a metronic theme and have included its all possible style sheets.

Upvotes: 1

Views: 7254

Answers (1)

U r s u s
U r s u s

Reputation: 6978

Apparently Bootstrap 3.0 and newer don't support nested dropdown menus.

Perhaps it is worth checking the script in the link above.

I'll add it here for completeness:

$('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(); 
    // Re-add .open to parent sub-menu item
    $(this).parent().addClass('open');
    $(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});

Upvotes: 2

Related Questions