我需要一个多级菜单，但Bootstrap不提供这样的东西，所以我做了一个基于列表组的菜单/导航栏，它工作得很好，我可以添加多级子菜单，但我有一个大问题，它不会崩溃，直到我点击“Pos 1”（检查bootply链接）或其他“Pos...".
我需要的解决方案，以便当我点击网站的每一个其他部分，菜单将崩溃。
下面是代码，下面你可以找到链接到bootply：

<div class="container">
    <div id="mainmenu" class="row">
          <div class="list-group panel visible-md visible-lg">
              <a href="#" class="list-group-item"><i class="glyphicon glyphicon-home"></i></a>
          </div>
          <div class="list-group panel">
            <a href="#menupos1" class="list-group-item" data-toggle="collapse" data-parent="#mainmenu">Pos1 <span class="menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
            <div class="collapse pos-absolute" id="menupos1">
              <a href="#submenu1" class="list-group-item sub-item" data-toggle="collapse" data-parent="#submenu1">SubPos1 <span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
                  <div class="collapse list-group-submenu" id="submenu1">
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos1</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos2</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos3</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos4</a>
                  </div>
             <a href="#" class="list-group-item sub-item">SubPos2</a>
             <a href="#" class="list-group-item sub-item">SubPos3</a>
             <a href="#" class="list-group-item sub-item">SubPos4</a>
             <a href="#" class="list-group-item sub-item">SubPos5</a>                                                                    
              </div>
        </div>
    </div>
</div>

演示：http://www.bootply.com/izpRKwzlYb
这将是伟大的，如果它只工作在中等和大分辨率，因为在xsmall和small它应该保持不动。