By Vijay Pancholi | Dropdown submenu do not stay open on hover

by Vijay Pancholi

HTML

<li class="dropdown">
  <a href="#" class="has-sub">Trigger 1 <i class="fa fa-angle-down"></i></a>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a href="#" class="sub-has-sub">Trigger in sub <i class="fa fa-angle-right"></i></a>
      <ul class="dropdown-menu">
        <li><a href="#">2 Columns</a></li>
        <li><a href="#">3 Columns</a></li>
        <li><a href="#">4 Columns</a></li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a href="#" class="sub-has-sub">Trigger in sub 2 <i class="fa fa-angle-right"></i></a>
      <ul class="dropdown-menu">
        <li><a href="#">2.2 Columns</a></li>
        <li><a href="#">3.3 Columns</a></li>
        <li><a href="#">4.4 Columns</a></li>
      </ul>
    </li>

  </ul>
</li>

JavaScript

$(document).ready(function() {
    $('.dropdown').hover(
        function() {
            $(this).find('.has-sub').next('ul').stop(true, true).fadeIn("fast");
        },
        function() {
            $(this).find('.has-sub').next('ul').stop(true, true).fadeOut("fast");
        }
    );

    $('.sub-has-sub').hover(
        function() {
            $(this).next('ul').stop(true, true).fadeIn("fast");
            $(this).addClass('open');
        },
        function() {
            $(this).next('ul').stop(true, true).fadeOut("fast");
            $(this).removeClass('open');
        }
    );
});