Как создать многоуровневое меню, горизонтальное с выпадающими пунктами?

Question

Dykoos @Dykoos

Как создать многоуровневое меню, горизонтальное с выпадающими пунктами?

У меня есть меню, и мне нужно сделать его трехуровневым. Когда я добавляю один дочерний элемент к другому, меню перестаёт работать когда я его открываю. Сайт сделан на WordPress

Логика работы при нажатии на меню:

jQuery('.icon').on('click', function() {
jQuery('.header-menu-mobile').fadeToggle();
jQuery('ul.sub-menu').slideUp();
});

jQuery('ul.menu li:has(ul)').prepend('<span></span>');

jQuery('.adv-title-card span span').each(function(){
n = jQuery(this).data();
jQuery(this).spincrement({
from: 1,
thousandSeparator: '',
duration: 5000
});
});


jQuery(document).on("click", '.menu .menu-item-has-children > span', function(event) {
jQuery(this).parent().find('ul.sub-menu').slideToggle("fast");
});

jQuery('.sub-menu .menu-item, .menu-close').on('click', function() {
jQuery('.header-menu-mobile').fadeOut();
jQuery('ul.sub-menu').slideUp();
});

Код HTML:

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1416"><a href="http://tario.su/%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b1%d0%be%d0%bd%d0%b5%d0%bd%d1%82%d0%be%d0%b2/">Для Абонентов<span class="submenu-toggle"></span></a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1437"><a href="http://tario.su/%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b1%d0%be%d0%bd%d0%b5%d0%bd%d1%82%d0%be%d0%b2/%d0%bf%d0%b0%d0%bc%d1%8f%d1%82%d0%ba%d0%b0-%d0%be%d0%bf%d0%bb%d0%b0%d1%82%d0%b0-%d1%83%d1%81%d0%bb%d1%83%d0%b3/">Памятка «Оплата услуг»</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1432"><a href="https://2gis.ru/bratsk/route/7178217496510472?m=101.761206%2C56.316564%2F14.2">Автобус №12</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1420"><a href="http://tario.su/%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b1%d0%be%d0%bd%d0%b5%d0%bd%d1%82%d0%be%d0%b2/%d1%81%d0%be%d1%81%d0%bd%d0%be%d0%b2%d1%8b%d0%b9-%d0%b1%d0%be%d1%80/">Сосновый бор<span class="submenu-toggle"></span></a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1418"><a href="http://tario.su/%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b1%d0%be%d0%bd%d0%b5%d0%bd%d1%82%d0%be%d0%b2/%d1%81%d0%be%d1%81%d0%bd%d0%be%d0%b2%d1%8b%d0%b9-%d0%b1%d0%be%d1%80/https-go-2gis-com-l5qygd/">Камеры Сосновый бор</a></li>
</ul>
</li>
</ul>

Nav_menu в function:

add_theme_support( 'menus' );

//nav-menu
add_filter('nav_menu_item_title', 'add_menu_item_has_children', 10, 4);

function add_menu_item_has_children( $title, $item, $args, $depth ) {
    if (in_array('menu-item-has-children', $item->classes)) {
        $title = $title . '<span class="submenu-toggle"></span>';
    }
    return $title;
}

Проблема возникает в файле slick.min.js, он отвечает за слайдеры. Что дописать в скрипт чтобы выводилось sub-menu третьегоуровня. При нажатии menu становиться недоступным ,а menu скрывается