title: drop-down submenu on hover in Bootstrap navbar
body: <p>I am using Bootstrap navbar for the menu, I have added dropdown submenu i.e menu under the submenu, I want to open submenu on hover as it was on click, I used some method but none of it work properly, my code as follows:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-static-top"&gt;
  &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;!-- Collapsed Hamburger --&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse"&gt;
              &lt;span class="sr-only"&gt;Toggle Navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;!-- Branding Image --&gt;
          &lt;div class="logo-container"&gt;
              &lt;a class="navbar-brand" href="{{ url('/home') }}"&gt;
                  {{-- {{ config('app.name', 'Laravel') }} --}}
                  &lt;img src="{{URL::asset('/')}}Images/group_65.jpg" class="img-responsive logo-images imgcenter"&gt;
              &lt;/a&gt;
          &lt;/div&gt;                    
      &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse" id="app-navbar-collapse" style="margin-left: 150px"&gt;
          &lt;!-- Left Side Of Navbar --&gt;
          &lt;ul class="nav navbar-nav main-menu"&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;My Classes&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Change Class&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Groups&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Roster&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Admin&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;                       
                      &lt;li class="dropdown-submenu"&gt;
                          &lt;a class="" href="#"&gt;Manage Users&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;All Users&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Admin&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Programs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Documents&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown-submenu"&gt;
                          &lt;a class="" href="#"&gt;Gallery&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Holidays&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Staff Attendance&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Payroll&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Food&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
                  &lt;li&gt;&lt;a href=""&gt;SoCo Help&lt;/a&gt;&lt;/li&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;!-- Right Side Of Navbar --&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;!-- Authentication Links --&gt;
              @if (Auth::guest())
                  &lt;li&gt;&lt;a href="{{ route('login') }}"&gt;Login&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="{{ route('register') }}"&gt;Register&lt;/a&gt;&lt;/li&gt;
              @else
  
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;
                         {{--  {{ Auth::user()-&gt;username }} &lt;span class="caret"&gt;&lt;/span&gt; --}}
                         &lt;img class="avtar" src="uploads/profile/{{Auth::user()-&gt;user_profile_pic}}" style="height: 19px;"&gt;
                          {{ Auth::user()-&gt;first_name}} {{Auth::user()-&gt;last_name }}&lt;span class="caret"&gt;&lt;/span&gt;
                      &lt;/a&gt;
  
                      &lt;ul class="dropdown-menu" role="menu"&gt;
                          &lt;li&gt;
                              &lt;a href="{{ route('logout') }}"
                                  onclick="event.preventDefault();
                                           document.getElementById('logout-form').submit();"&gt;
                                  {{-- &lt;i class="fa fa-fw fa-sign-out"&gt; Logout&lt;/i&gt; --}}
                                  &lt;i class="glyphicon glyphicon-log-out"&gt;&lt;/i&gt; Logout
                              &lt;/a&gt;
  
                              &lt;form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"&gt;
                                  {{ csrf_field() }}
                              &lt;/form&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              @endif
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I have added script for drop-down submenu as </p>
  
  <pre><code>$('.dropdown-submenu a').on("click", function(e){                    
                      $(this).next('ul').toggle();
                      e.stopPropagation();
                      e.preventDefault();                    
              });
  </code></pre>
  
  <p>So what is the proper way to accomplish this? It should work for collapse too.</p>