title: Multilevel (up to 3 level) Vertical Menu with bootstrap/Jquery
body: <p>I am trying to create a navigation menu which is vertical and up to 3-level navigation and last level is toggable menu (when u click on last level menu,a set of submenu appears below that).A sample structure of the menu structure is similar to this</p>
  
  <p><img src="https://i.stack.imgur.com/HWUrk.png" alt="enter image description here"></p>
  
  <p>I tried below code but doesn't getting desired output</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;title&gt;Bootstrap &lt;/title&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  
      &lt;link href="StyleSheet1.css" rel="stylesheet" /&gt;
      &lt;!-- Optional theme
      &lt;link rel="stylesheet" href=""&gt;
           --&gt;
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;style type="text/css"&gt;
          .dropdown-submenu {
              position: relative;
              border-bottom: 1px solid #ccc;
          }
  
              .dropdown-submenu &gt; .dropdown-menu {
                  top: 0;
                  left: 100%;
                  margin-top: -6px;
                  margin-left: -1px;
                  -webkit-border-radius: 0 6px 6px 6px;
                  -moz-border-radius: 0 6px 6px;
                  border-radius: 0 6px 6px 6px;
              }
  
              .dropdown-submenu:hover &gt; .dropdown-menu {
                  display: block;
              }
  
              .dropdown-submenu &gt; a:after {
                  display: block;
                  content: " ";
                  float: right;
                  width: 0;
                  height: 0;
                  border-color: transparent;
                  border-style: solid;
                  border-width: 5px 0 5px 5px;
                  border-left-color: #ccc;
                  margin-top: 5px;
                  margin-right: -10px;
              }
  
              .dropdown-submenu:hover &gt; a:after {
                  border-left-color: #fff;
              }
  
              .dropdown-submenu.pull-left {
                  float: none;
              }
  
                  .dropdown-submenu.pull-left &gt; .dropdown-menu {
                      left: -100%;
                      margin-left: 10px;
                      -webkit-border-radius: 6px 0 6px 6px;
                      -moz-border-radius: 6px 0 6px 6px;
                      border-radius: 6px 0 6px 6px;
                  }
  
          ul {
              list-style: none;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="col-md-3 column margintop20"&gt;
              &lt;ul class="nav nav-pills nav-stacked"&gt;
  
                  &lt;li class="dropdown-submenu active"&gt;
                      &lt;a tabindex="-1" href="#"&gt;Client Advice&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
  
                          &lt;li class="dropdown-submenu"&gt;&lt;a tabindex="-1" href="#"&gt;Pre-advice&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown-submenu"&gt;&lt;a href="#"&gt;Strategy &amp; Technical&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown-submenu"&gt;&lt;a href="#"&gt;Research&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown-submenu active"&gt;
                              &lt;a href="#"&gt;APL &amp; Products&lt;/a&gt;
                              &lt;ul class="dropdown-menu parent"&gt;
                                  &lt;li style=" border-bottom: 1px solid #ccc;"&gt;
                                      &lt;a href="#"&gt;
                                          Approved Product List
                                          &lt;span aria-hidden="true" class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
                                          &lt;span aria-hidden="true" class="glyphicon glyphicon-minus" style="display:none;"&gt;&lt;/span&gt;
                                      &lt;/a&gt;
  
                                      &lt;ul class="child"&gt;
                                          &lt;li style="padding:10px 15px;"&gt;Platforms&lt;/li&gt;
                                          &lt;li style="padding: 10px 15px;"&gt;Managed Funds&lt;/li&gt;
                                          &lt;li style="padding: 10px 15px;"&gt;Wealth Protection&lt;/li&gt;
                                          &lt;li style="padding: 10px 15px;"&gt;Listed Securities&lt;/li&gt;
                                          &lt;li style="padding: 10px 15px;"&gt;Wealth Protection&lt;/li&gt;
                                          &lt;li style="padding: 10px 15px;"&gt;Listed Securities&lt;/li&gt;
                                          &lt;li style="padding: 10px 15px;"&gt;Listed Securities&lt;/li&gt;
                                      &lt;/ul&gt;
  
                                  &lt;/li&gt;
                                  &lt;li style=" border-bottom: 1px solid #ccc;"&gt;&lt;a href="#"&gt;Model Portfolios&lt;/a&gt;&lt;/li&gt;
                                  &lt;li style=" border-bottom: 1px solid #ccc;"&gt;&lt;a href="#"&gt;Non-approved Products&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="dropdown-submenu"&gt;&lt;a href="#"&gt;Implementation&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown-submenu"&gt;&lt;a href="#"&gt;Review&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown-submenu"&gt;&lt;a href="#"&gt;Execution Only&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="dropdown-submenu"&gt;&lt;a href="#"&gt;Personal Development&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown-submenu"&gt;&lt;a href="#"&gt;Practice&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown-submenu"&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $('.child').hide(); //Hide children by default
  
          $('.parent').children().click(function () {
              event.preventDefault();
              $(this).children('.child').slideToggle('slow');
              $(this).find('span').toggle();
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there any way to create a vertical multilevel menu structure using bootstrap,jquery I haven't got any multilevel menus with vertical orientation .Facing css issues with this code,not able to create similar navigation menu.</p>