title: Clickable Multilevel menu
body: <p>I would like to do an menu like this one <a href="http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3" rel="nofollow">http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3</a>, it has to be multilevel menu but I would like to open the menu only with clicks, also the multilevel items, not with on mouse over. Also if the menu is open and make click on the body will close all the menu. Anyone have any idea?</p>
  
  <p>Thanks in advance.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="dropdown"&gt;
              &lt;a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html"&gt;
                  Dropdown &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Some action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Some other action&lt;/a&gt;&lt;/li&gt;
                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li class="dropdown-submenu"&gt;
                  &lt;a tabindex="-1" href="#"&gt;Hover me for more options&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="dropdown-submenu"&gt;
                      &lt;a href="#"&gt;Even More..&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;3rd level&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;3rd level&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.dropdown-submenu {
      position: relative;
  }
  
  .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&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;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(function(){
      $(".dropdown-submenu").on("click",function(e){
      var current=$(this).find(".dropdown-menu");
          current.toggle();
          e.stopPropagation();
      });
  });
  </code></pre>