Bootstrap 3 :How to display sub-menu of side navigation bar, bottom of each menu?

I am trying to make side navigation bar using Bootstrap 3. Now sub-menus are display right side of the each menu. I want to display it bottom of parent menu.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">


      <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
          <li class="dropdown-submenu">
            <a href="#">More..</a>
            <ul class="dropdown-menu">
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
            </ul>
          </li>
        </ul>
      </li>


      <li class="divider"></li>
      <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options2</a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Second level</a></li>
          <li class="dropdown-submenu">
            <a href="#">More..</a>
            <ul class="dropdown-menu">
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
            </ul>
          </li>
          <li><a href="#">Second level</a></li>
          <li><a href="#">Second level</a></li>
        </ul>
      </li>
    </ul>

Here is the Demo.

Edit: I try to do it using collapse jsfiddle.net/mridulpv/Wrh8x/5 . But still some problems. I want to hide collapse item at starting, and remove horizondal line etc.