Sidebar with sub menus + metro-bootstrap

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://talkslab.github.com/metro-bootstrap/css/metro-bootstrap.css">
<ul id="nav" class="nav nav-list bs-docs-sidenav" >
    <li><a href="#" class="parent">Products</a>
        <ul class="bs-docs-sidenav" style="display:none;">
  <li><a href="#" class="parent">Laptop</a>
      <ul class="bs-docs-sidenav" style="display:none;">
          <li>
              <a href="#">List</a>
              <a href="#">Create</a>
          </li>
      </ul>
  </li>
  <li><a href="#">Tablet</a></li>
</ul>
</li>
</ul>

CSS

.bs-docs-sidenav {
  padding: 0;
  background-color: #FFF;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
     -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
          box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
  display: block;
  width: 190px \9;
  margin: 0 0 -1px;
  padding: 8px 14px;
  border: 1px solid #e5e5e5;
}

.bs-docs-sidenav ul { margin-left: 0; padding-left: 0; }

.bs-docs-sidenav > li > ul  li {  background-color: #F9F9F9; }
.bs-docs-sidenav > li > ul > li > ul  li {  background-color: #F0F0F0; }

.bs-docs-sidenav > .active > a {
  position: relative;
  z-index: 2;
  padding: 9px 15px;
  border: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
     -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
/* Chevrons */
.bs-docs-sidenav .icon-chevron-right {
  //float: right;
  margin-top: 2px;
  //margin-right: -6px;
  opacity: .25;
}
.bs-docs-sidenav > li > a:hover {
  background-color: #f5f5f5;
}
.bs-docs-sidenav a:hover .icon-chevron-right {
  opacity: .5;
}
.bs-docs-sidenav .active .icon-chevron-right,
.bs-docs-sidenav .active a:hover .icon-chevron-right {
  background-image: url(http://raw.github.com/twitter/bootstrap/master/img/glyphicons-halflings.png);
  opacity: 1;
}
.bs-docs-sidenav.affix {
  top: 40px;
}
.bs-docs-sidenav.affix-bottom {
  position: absolute;
  top: auto;
  bottom: 270px;
}
ul
{
    list-style: none;
}
}

JavaScript

$('.parent').click(function() {
    var subMenu = $(this).siblings('ul');
    if ($(subMenu).hasClass('open')) {
        $(subMenu).fadeOut();
        $(subMenu).removeClass('open').addClass('closed');
    }
    else {
        $(subMenu).fadeIn();
        $(subMenu).removeClass('closed').addClass('open');
    }
});