Bootstrap Collapsible tree menu


<div class="container row span12 menu">
<div class="accordion">
<div class="accordion-group">
    
<div class="accordion-heading level1">
<a class="accordion-toggle" data-toggle="collapse" href="#BODY">Level 1</a>

</div>
</div>

<div class="accordion-body collapse" id="BODY">
<div class="accordion-inner">
<div class="accordion" id="LEVEL2">
<div class="accordion-group">
<div class="accordion-heading level2">
<a class="accordion-toggle" data-parent="#BODY2" data-toggle="collapse" href="#BODY2">
Level 2</a>

<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil" data-toggle="dropdown" href="javascript:;" 
style="font-style: italic"></a>

<ul class="dropdown-menu">

<li>
<a href="javascript:;"><i class="icon-plus"></i> Add</a>
</li>

<li class="divider"></li>

<li>
<a href="javascript:;"><i class="icon-pencil"></i> Edit</a>
</li>

<li class="divider"></li>

<li>
<a class="danger" href="#remove"><i class="icon-remove"></i> Remove</a>
</li>
</ul>
</div>
</div>

<div class="accordion-body collapse" id="BODY2">
<div class="accordion-inner">
<div class="accordion" id="LEVEL3">
<div class="accordion-group">
<div class="accordion-heading level3">
<a class="accordion-toggle" data-parent="#LEVEL3" data-toggle="collapse" href="#BODY3">
    Level 3</a>

<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil" data-toggle="dropdown" href="javascript:;" style="font-style: italic"></a>


<ul class="dropdown-menu">

<li>
<a href="javascript:;"><i class="icon-plus"></i> Add</a>
</li>

<li class="divider"></li>

<li>
<a href="javascript:;"><i class="icon-pencil"></i> Edit</a>
</li>

<li class="divider"></li>

<li>
<a class="danger" href="#remove"><i class="icon-remove"></i> Remove</a>
</li>
</ul>

</div>
</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>

.menu .accordion-heading {  position: relative; }
.menu .accordion-heading .edit {
    position: absolute;
    top: 8px;
    right: 30px; 
}
.menu .level1 { border-left: 4px solid #f38787; }
.menu .level2 { border-left: 4px solid #65c465; }
.menu .level3 { border-left: 4px solid #98b3fa; }
.menu .collapse.in { overflow: visible; }