title: Show Bootstrap Multi level Dropdown Menu on Hover
body: <p>I understand there are couple of posts on this title. What I want , to implement the same in my existing code and by using jQuery since I have already added ample of CSS lines for it's styling purpose.</p>
  
  <p>The Piece of codes I have used in my web application for implementing Multi drop-down .  </p>
  
  <p><strong>HTML</strong> : </p>
  
  <pre><code>&lt;div class="dropdown" style="position:relative"&gt;
  &lt;a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;Click Here &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;
          &lt;a class="trigger right-caret"&gt;Level 1&lt;/a&gt;
          &lt;ul class="dropdown-menu sub-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Level 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;
                  &lt;a class="trigger right-caret"&gt;Level 2&lt;/a&gt;
                  &lt;ul class="dropdown-menu sub-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Level 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Level 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="trigger right-caret"&gt;Level 3&lt;/a&gt;
                          &lt;ul class="dropdown-menu sub-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Level 4&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Level 4&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Level 4&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Level 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Level 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Level 1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>css</strong></p>
  
  <pre><code>.dropdown-menu&gt;li
  {   position:relative;
      -webkit-user-select: none; /* Chrome/Safari */        
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+ */
      /* Rules below not implemented in browsers yet */
      -o-user-select: none;
      user-select: none;
      cursor:pointer;
  }
  .dropdown-menu .sub-menu {
      left: 100%;
      position: absolute;
      top: 0;
      display:none;
      margin-top: -1px;
      border-top-left-radius:0;
      border-bottom-left-radius:0;
      border-left-color:#fff;
      box-shadow:none;
  }
  .right-caret:after,.left-caret:after
   {  content:"";
      border-bottom: 5px solid transparent;
      border-top: 5px solid transparent;
      display: inline-block;
      height: 0;
      vertical-align: middle;
      width: 0;
      margin-left:5px;
  }
  .right-caret:after
  {   border-left: 5px solid #ffaf46;
  }
  .left-caret:after
  {   border-right: 5px solid #ffaf46;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function(){
  $(".dropdown-menu &gt; li &gt; a.trigger").on("click",function(e){
      var current=$(this).next();
      var grandparent=$(this).parent().parent();
      if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
          $(this).toggleClass('right-caret left-caret');
      grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
      grandparent.find(".sub-menu:visible").not(current).hide();
      current.toggle();
      e.stopPropagation();
  });
  $(".dropdown-menu &gt; li &gt; a:not(.trigger)").on("click",function(){
      var root=$(this).closest('.dropdown');
      root.find('.left-caret').toggleClass('right-caret left-caret');
      root.find('.sub-menu:visible').hide();
  });
  });
  </code></pre>
  
  <p>I have only go far a bit only. I am able to show the 1st dropdown menu on hover.</p>
  
  <p><strong>js</strong></p>
  
  <pre><code> $(".dropdown &gt; a").hover(function(){
          $(this).parent().addClass('open');
      });
  </code></pre>
  
  <p>When I will hover on any "li" element of 1st level navigation , if any 2nd level navigation present , It should be shown. </p>
  
  <p>&nbsp;</p>