ایجاد یک منو مانند دیجیکالا ولی با یه تفاوت

سلام دوستان، میخواستم یه منوی سه سطحی درست کنم، کلیات منو تقریبا مثل دیجی کالاست یعنی مگا منوو داریم در نهایت ولی تفاوتش اینه که در استپ اول، با هاور شدن منوی اول یه زیر منوی دیگه بصورت نوار باید بیاد زیرش، و بعد باز با هاور شدن هرکدوم از آیتم های نوار بعدی زیرشون مگا منوی مربوط به اون باز بشه

من با ul های تو در تو کلیات منو رو ایجاد کردم ولی اینکه چجوری با کاربر تعامل داشته باشه رو نتونستم جوری درست کنم که پسندم باشه، با سی اس اس میشه ها ولی دیدین که هاور سی اس اس خیلی سریعه و رو اعصابه یه کم موس اشتباه جابه جا بشه میپره و اذیت میکنه برا همین میخوام با جی کوئری بزنم ولی باز یه مشکل دیگه میخورم، من با کلیک درستش کردما، یعنی اگه بخوام کاربر با کلیک روی گزینه ها منو باز و زیر منو بسته بشه انجام دادم ، ولی هاور رو نمیدونم

کسی هست که بتونه کمکم کنه،

      <!--Navbar -->
      <nav class="e_nav">
        <ul class="e_navbar">
          <li class="pointer"></li>
          <li class="e_navbar-item active">
            <a href="#" class="e_navbar-link"><i class="fal fa-home fa-lg"></i></a>
          </li>
          <li class="e_navbar-item">
            <a href="#" class="e_navbar-link">کالای دیجیتال</a>
            <ul class="e_subbar">
              <li class="sub-pointer"></li>
              <li class="e_subbar-item active">
                <a href="#" class="e_subbar-link">موبایل</a>
                <ul class="e_lastbar">
                  <li class="last-pointer"></li>
                  <li class="e_lastbar-item active">
                    <a href="#" class="e_lastbar-link">سامسونگ</a>
                  </li>
                  <li class="e_subbar-item">
                    <a href="#" class="e_lastbar-link">بلک بری</a>
                  </li>
                </ul>
              </li>
              <li class="e_subbar-item">
                <a href="#" class="e_subbar-link">تبلت</a>
              </li>
            </ul>
          </li>
          <li class="e_navbar-item">
            <a href="#" class="e_navbar-link">لوازم منزل</a>
            <ul class="e_subbar">
              <li class="sub-pointer"></li>
              <li class="e_subbar-item active">
                <a href="#" class="e_subbar-link">آشپزخانه</a>
              </li>
              <li class="e_subbar-item">
                <a href="#" class="e_subbar-link">مبلمان</a>
              </li>
            </ul>
          </li>
          <li class="e_navbar-item">
            <a href="#" class="e_navbar-link">آرایشی بهداشتی</a>
          </li>
          <li class="e_navbar-item">
            <a href="#" class="e_navbar-link">پوشاک</a>
          </li>
        </ul>
      </nav>

/**
              * Responsive navigation with a suggestive pointer
              *
              * TODO: Fix bug where resizing below and above 768px wide
              *       causes the feature button and pointer to animate
              */
(function ($) {
   var nav = $('.e_nav'),
   menu = nav.find('.e_navbar'),
   active = menu.find('.e_navbar-item.active'),
   // items = menu.find('e_navbar-item').not('.pointer'),
   items = menu.find('.e_navbar-item'),
   pointer = nav.find('.pointer');

   /**
                                    * Center the pointer vertically or horizontally based on the screen width
                                    *
                                    * @param   a     jQuery Object   The active menu item
                                    */
   var centralize = function centralize(m) {

           return 'translate3d(' + (m.position().left + m.outerWidth() / 2) + 'px, 0, 0) ';

   };


       nav.find('#mobile-nav-check').attr('tab-index', '-1');


   /**
      * Center the pointer and reveal it on load
      */
   pointer.css({
       display: 'block',
       transform: centralize(active) });


   /**
                                          * Center the pointer on resizing the screen
                                          */
   $(window).on('resize', function () {

       pointer.css({
           transform: centralize(menu.find('li.active')) });

   });

   /**
        * Add the active class on click
        *
        * Note: only really useful if the a tags dont go anywhere
        */
   // items.on('click', function () {
   items.on('mouseover', function () {
       items.removeClass('active');
       $(this).addClass('active').find('.e_navbar-link').blur();
   });

   /**
        * Center the pointer on hovering over a nav item
        */
   items.on('mouseover', function () {
       pointer.css({
           transform: centralize($(this)) });

   });

   /**
        * Center the pointer on the active nav item when
        * hovered out of a nav-item
        */

        // hovered
   // items.on('mouseout', function () {
   //     pointer.css({
   //         transform: centralize(menu.find('.e_navbar-item.active')) });
   //
   // });

   /**
        * Center the pointer on tabbing or focussing
        * a nav item
        */
   items.find('.e_navbar-link').focus(function () {
       pointer.css({
           transform: centralize($(this).parent()) });

   });

   /**
        * Center the pointer on the active nav item when
        * nav-item is unfocussed
        */
   items.find('.e_navbar-link').blur(function () {
       pointer.css({
           transform: centralize(menu.find('.e_navbar-link')) });

   });

   // hover open menu=============================
   $(".e_navbar-link").mouseover(function(){
     var currentTag = $(this).next();
     currentTag.addClass("d-flex");
     $('.e_subbar.d-flex').not(currentTag).removeClass('d-flex');


   });





   // window.onmouseover = function (event) {
   //     if (!event.target.matches('.e_nav,.e_navbar-item , .e_navbar-link, .e_subbar, .e_subbar-item, .e_subbar-link')) {
   //
   //         var dropdowns = document.getElementsByClassName("e_subbar");
   //         var i;
   //         for (i = 0; i < dropdowns.length; i++) {
   //             var openDropdown = dropdowns[i];
   //             if (openDropdown.classList.contains('d-flex')) {
   //                 openDropdown.classList.remove('d-flex');
   //             }
   //         }
   //
   //     }
   // }


})(jQuery);

$navh: 50px;
$navcolour: #fff;
$navbgcolour: #5C6BC0;

.e_nav {
  --navheight: $navh;
  position   : relative;
  width      : 100%;
  margin     : 0;
  height     : var(--navheight);
  line-height: var(--navheight);
  font-weight: 300;
  background : $navbgcolour;
  color      : $navcolour;
  // overflow   : hidden;
  box-shadow : 0 3px 5px rgba(0,0,0,0.3);
  z-index    : map-get($z-order,navbar);
  @at-root .e_navbar {
    position      : relative;
    display       : flex;
    flex-direction: row-reverse;
    list-style    : none;
    margin        : 0;
    padding       : 0 1rem;
    width         : 100%;

    &-item {
      height: var(--navheight);
    }

    &-link {
      display        : block;
      padding        : 0 16px;
      // line-height    : $navh;
      line-height    : var(--navheight);
      color          : $navcolour;
      text-decoration: none;
      transition     : background 0.3s;

      .active & {
        background: rgba(0,0,0,0.15);

        &:focus,
        &:hover {
          background: rgba(0,0,0,0.25);
        }
      }

      &:focus,
      &:hover {
        outline   : none;
        background: rgba(0,0,0,0.25);
      }
    }

    .pointer {
      display      : none;
      width        : 0;
      height       : 0;
      border-left  : 10px solid transparent;
      border-right : 10px solid transparent;
      border-bottom: 10px solid lighten($navbgcolour,10%);
      position     : absolute;
      bottom       : 0;
      left         : -5px;
      // background   : $navbgcolour;
      transition   : transform 0.3s;
      z-index      : 2;
      // transform    : translate3d(0, 0, 0);
      // box-shadow   : 0 0 2px 1px rgba(0,0,0,0.2);
      filter: drop-shadow(0px -2px 3px rgba(0,0,0,0.2));
    }
    @at-root .e_subbar {
      padding         : 0.5rem 1rem;
      position        : absolute;
      width           : 100%;
      display         : none;
      flex-direction  : row-reverse;
      top             : var(--navheight);
      left            : 0;
      right           : 0;
      background-color: lighten($navbgcolour,10%);
    }
  }
}

یه کم که چه عرض کنم خیلی کدام در هم برهمه، ولی از قصد کد های کامنت شده هم گذاشتم که شاید یه ایده ای به ذهنتون زد، اگه پیشنهاد میدید بیخیال هاور بشم، با کلیک جلو ببرم قضیه رو هم بگید.