下拉子菜单在悬停时不会保持打开状态

Question

我有一个下拉菜单，其子菜单在悬停时执行淡入/淡出。下拉菜单会像我想要的那样淡入淡出，下拉子菜单会像我想要的那样淡入/淡出。但是，当我从下拉列表转到子菜单链接时，它会消失并消失。

我无法弄清楚如何解决此问题并保持子菜单打开。

HTML：

<!-- Dropdown Submenu -->
               <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> <!-- /.dropdown -->
                <!-- Dropdown Submenu End -->

jQuery

$('.dropdown').hover(function() {

      $(this).find('.has-sub').next('ul').stop(true, true).fadeIn("fast");

      }, 
      function() {
        $(this).find('.has-sub').next('ul').stop(true, true).delay(300).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).delay(300).fadeOut("fast");

     });