Bootstrap folding menu items

Question

I am trying to make the bootstrap menu that makes sub-points legible.

Similar to http://jsfiddle.net/ However, I need links in the submenu, but not such a complex structure.

Here is what I tried

<div class="row"> <!-- Main component for a primary marketing message or call to action --> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Blog</a></li> <li><a href="#">About US</a></li> <li><a href="#">Jobs</a></li> </ul> </li> <li><a href="">Nav item again</a></li> <li><a href="">One more nav</a></li> <li><a href="">Another nav item</a></li> </ul> </div> </div> 

The pop-up submenu does not push the remaining items in the list down, but rather appears on top of them. This makes navigation difficult.

Answer 1

Could you better use the panels and the collapse plugin to make a simple accordion? Here is an example to show what I mean. He does what I think you want.

 <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> More </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <ul> <li><a href="#">Blog</a></li> <li><a href="#">About US</a></li> <li><a href="#">Jobs</a></li> </ul> </div> </div> </div> </div> </li> <li><a href="">Nav item again</a></li> <li><a href="">One more nav</a></li> <li><a href="">Another nav item</a></li> </ul> </div> </div>