bootstrap multilevel dropdown - html

Question

Here's the jsfiddle to the dropdown menu. If you click on any link it will actually take you to the main page that I am working on. If you try clicking on the sub-menu under human practices nothing comes up.
Please help, I don't understand why the sub-menu is not being generated. Thanks so much.
Here is the fiddle:http://jsfiddle.net/maxgitt/a9vq8v9p/
Here is a direct link to the problem of creating a submenu within Human Practices: http://2015.igem.org/Template:Michigan

Answer 1

This might help you or give you some ideas, the JS is so your submenu will open and remain open after Click.
You don't have to keep the open submenu directly underneath it's parent but you'll find the submenu going off the page once the viewport is reduced if you aren't careful where you position it. The CSS rules that are commented out in .dropdown-submenu > .dropdown-menu will help to re-position the submenu if you want to.
(function($) {
$(document).ready(function() {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
/*top: 0;
left: 15%;*/
margin-top: 5px;
margin-left: -1px;
}
.navbar .dropdown-submenu,
.navbar .dropdown-menu {
border-radius: 0;
box-shadow: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-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" href="#">Project</a>
</div>
<div class="collapse navbar-collapse" id="navbar-1">
<ul class="nav navbar-nav">
<li>Home <span class="sr-only">(current)</span>
</li>
<li class="dropdown"> Project <span class="caret"></span>
<ul class="dropdown-menu">
<li>Design
</li>
<li>Experiments & Protocols
</li>
<li>Results & Discussion
</li>
<li>Collaborations
</li>
<li>Parts
</li>
</ul>
</li>
<li>Notebook
</li>
<li>Modeling
</li>
<li class="dropdown">Human Practices<b class="caret"></b>
<ul class="dropdown-menu">
<li>Background
</li>
<li>Diseases and Applications
</li>
<li>Current Detection Methods
</li>
<li class="dropdown dropdown-submenu">Informed Design <span class="caret"></span>
<ul class="dropdown-menu">
<li>Survey
</li>
<li>Biotech/Pharmaceutical Industry
</li>
<li>Food Science Industry
</li>
<li>Medical Practice: Point of Care Testing
</li>
</ul>
</li>
</ul>
</li>
<li>Safety
</li>
</ul>
</div>
</nav>