Multi-level Dropdown in bootstrap 3.3.4 - html

Question

So i am trying to accomplish a multi-level dropdown as the title says. I am only getting one level and the second level is not appearing. I am not sure what I am missing. Here is what I have:
<div class="collapse navbar-collapse" id="conference-dropdowns">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">AFC<span class="caret"></span></a>
<ul class="dropdown-menu multi-level" role="menu">
<li class="dropdown-submenu">
<li>AFC South</li>
<ul class="dropdown-menu">
<li>Colts</li>
</ul>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
</ul>
</div>
I am on bootstrap 3.3.4 and just get AFC for Dropdown and inside only AFC South shows up. No submenu for it. any help would be great. thanks. I am also using bootswatch spacelab

Answer 1

I hope this is what you were looking for ^^
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">AFC
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">AFC South</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<!--<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>-->
</ul>
</li>
</ul>
</div>
</div>
$(document).ready(function() {
$(".dropdown-submenu a.test").on("click", function(e) {
$(this)
.next("ul")
.toggle();
e.stopPropagation();
e.preventDefault();
});
});
JSFiddle

Answer 2

HTML
<div class="collapse navbar-collapse" id="conference-dropdowns">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">AFC <span class="caret"></span></a>
<ul class="dropdown-menu">
<!-- submenu-->
<li class="dropdown-submenu">
<a class="submenu" data-toggle="dropdown" href="#">AFC South <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="submenu" data-toggle="dropdown" href="#">Colts <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Red </li>
</ul>
</li>
</ul>
</li>
<!-- submenu || -->
</ul>
</li>
</ul>
</div>
CSS
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
Codepen: Bootstrap 3 dropdown multilevel caret up

Answer 3

Here is what I found to work in testing it, now I just need to write it out dynamically using JS.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand pull-left" href="#"><img id="logo" src="${pageContext.servletContext.contextPath}/static/images/aston.png"></a>
</div>
<div class="collapse navbar-collapse" id="conference-dropdowns">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">AFC<span class="caret"></span></a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">AFC South</a>
<ul class="dropdown-menu">
<li>Colts</li>
<li>Jaguars</li>
<li>Titans</li>
<li>Texans</li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">AFC North</a>
<ul class="dropdown-menu">
<li>Steelers</li>
<li>Ravens</li>
<li>Browns</li>
<li>Bengals</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">NFC<span class="caret"></span></a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">NFC North</a>
<ul class="dropdown-menu">
<li>Packers</li>
<li>Vikings</li>
<li>Lions</li>
<li>Bears</li>
</ul>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
</ul>
</div>
</div>