添加另一个关卡 - 菜单HTML/Boostrap 3/JS

Question

如何在页面底部的HTML中为此菜单结构添加另一个关卡？

当前

Test 

--->a 
--->b 

什么，我试图做

Test 

    --->a 
      --->1 
      --->2 
    --->b 
      --->1 
      --->2 

HTML

<li class="nav-header"> 
    <a data-target="#menu5" data-toggle="collapse" href="#"> 
    <h3>test</h3></a> 
    <ul class="list-unstyled collapse" id="menu5"> 
     <li> 
      <a href="#"><i class="glyphicon glyphicon-circle"></i> Facebook</a> 
     </li> 
     <li> 
      <a href="#"><i class="glyphicon glyphicon-circle"></i> Twitter</a> 
     </li> 
    </ul> 
</li> 

Answer 1

<ul> 
    <li class="nav-header"> 
       <a data-target="#menu5" data-toggle="collapse" href="#"> 
       <h3>test</h3></a> 
       <ul class="list-unstyled collapse" id="menu5"> 
        <li> 
         <a data-target="#submenu" data-toggle="collapse" href="#"><i class="glyphicon glyphicon-circle"></i> Facebook</a> 
         <ul class="list-unstyled collapse" id="submenu"> 
          <li> 1 </li> 
          <li> 2</li> 
         </ul> 
        </li> 
        <li> 
         <a href="#"><i class="glyphicon glyphicon-circle"></i> Twitter</a> 
        </li> 
       </ul> 
    </li> 
</ul> 

我相信，你只需要一个独特的创造另一个崩溃元素ID。使用<a>元素作为切换。