how fix this collapsable bootstrap sidebar menu? - css

Question

this code below works fine if I have 1 collapsable sidemenu item, but when I add another the upper item doesn't work right. It's all badly highlighted.
The bottom one works still fine. What's wrong here thanks. Here is bootply:
http://www.bootply.com/IABXgPMp5S
<div class="container body-content">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<ul class="nav">
<li>
Sector One
<ul class="nav collapse pull-right" id="sub1">
<li>List 1</li>
<li>List 2</li>
</ul>
</li>
<li>
Sector Two
<ul class="nav collapse pull-right" id="sub2">
<li>List 1</li>
<li>List 2</li>
</ul>
</li>
</ul>
</div>
</div><!--/.row-->
</div><!--/.container-->
and css file:
body {
padding-top: 51px;
}
.text-center {
padding-top: 20px;
}
.col-xs-12 {
background-color: #fff;
}
#sidebar {
height: 100%;
padding-right: 0;
padding-top: 20px;
}
#sidebar .nav {
width: 95%;
}
#sidebar li {
border:0 #f2f2f2 solid;
border-bottom-width:1px;
}
/* collapsed sidebar styles */
#media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -41.6%;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -41.6%;
}
.row-offcanvas-right.active {
right: 41.6%;
}
.row-offcanvas-left.active {
left: 41.6%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 41.6%;
}
#sidebar {
padding-top:0;
}
}

Answer 1

You are not closing the first "ul" before starting the second one, so bootstrap thinks you have one big unordered list.
here is a link to the fix and here:
<div class="container body-content">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<ul class="nav">
<li>
Sector One <span class="glyphicon glyphicon-arrow-down pull-right"></span>
<ul class="nav collapse pull-right" id="sub1">
<li>List 1</li>
<li>List 2</li>
</ul>
</li>
</ul>
<ul class="nav">
<li>
Sector Two <span class="glyphicon glyphicon-arrow-down pull-right"></span>
<ul class="nav collapse pull-right" id="sub2">
<li>List 1</li>
<li>List 2</li>
</ul>
</li>
</ul>
</div>
</div><!--/.row-->
</div><!--/.container-->
is the corrected html