Выпадающее подменю после подсветки элемента меню
Создаю сайт со следующим интерфейсом.
Есть набор элементов меню - Бытовая техника для кухни, Бытовая техника для дома и т.д. Каждый из них описывается структурой вида
<li class="dropdown dropdown-submenu" data-sectioncode="pzkitchen">
<a href="https://krasnodar.positronica.ru/catalog/pzkitchen/" class="dropdown-toggle pzkitchen">
Бытовая техника для кухни
</a> <div class="panel-body dropdown noscroll" id="menu">
<ul class="dropdown-menu dropdown-submenu pz_menu">
<li class="dropdown dropdown-submenu" data-sectioncode="pzkitchen">
<a href="https://positronica.ru/catalog/pzkitchen/" class="dropdown-toggle pzkitchen">
Бытовая техника для кухни </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzkitchen/" class="dropdown-menu-left__title_link">
Бытовая техника для кухни </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzhome">
<a href="https://positronica.ru/catalog/pzhome/" class="dropdown-toggle pzhome">
Бытовая техника для дома </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzhome/" class="dropdown-menu-left__title_link">
Бытовая техника для дома </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzsad">
<a href="https://positronica.ru/catalog/pzsad/" class="dropdown-toggle pzsad">
Садовая техника и инструменты </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzsad/" class="dropdown-menu-left__title_link">
Садовая техника и инструменты </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pz_nout_pc">
<a href="https://positronica.ru/catalog/pz_nout_pc/" class="dropdown-toggle pz_nout_pc">
Ноутбуки и компьютеры </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pz_nout_pc/" class="dropdown-menu-left__title_link">
Ноутбуки и компьютеры </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzserv">
<a href="https://positronica.ru/catalog/pzserv/" class="dropdown-toggle pzserv">
Комплектующие </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzserv/" class="dropdown-menu-left__title_link">
Комплектующие </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pztele">
<a href="https://positronica.ru/catalog/pztele/" class="dropdown-toggle pztele">
Телевизоры и аудиотехника </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pztele/" class="dropdown-menu-left__title_link">
Телевизоры и аудиотехника </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzsmart">
<a href="https://positronica.ru/catalog/pzsmart/" class="dropdown-toggle pzsmart">
Смартфоны и планшеты </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzsmart/" class="dropdown-menu-left__title_link">
Смартфоны и планшеты </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzogtehnika">
<a href="https://positronica.ru/catalog/pzogtehnika/" class="dropdown-toggle pzogtehnika">
Офисная техника и мебель </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzogtehnika/" class="dropdown-menu-left__title_link">
Офисная техника и мебель </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzservery">
<a href="https://positronica.ru/catalog/pzservery/" class="dropdown-toggle pzservery">
Сетевое оборудование и серверы </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzservery/" class="dropdown-menu-left__title_link">
Сетевое оборудование и серверы </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzumnyidom">
<a href="https://positronica.ru/catalog/pzumnyidom/" class="dropdown-toggle pzumnyidom">
Умный дом и видеонаблюдение </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzumnyidom/" class="dropdown-menu-left__title_link">
Умный дом и видеонаблюдение </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzfoto">
<a href="https://positronica.ru/catalog/pzfoto/" class="dropdown-toggle pzfoto">
Фото и видеотехника </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzfoto/" class="dropdown-menu-left__title_link">
Фото и видеотехника </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzturizm">
<a href="https://positronica.ru/catalog/pzturizm/" class="dropdown-toggle pzturizm">
Активный отдых и хобби </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzturizm/" class="dropdown-menu-left__title_link">
Активный отдых и хобби </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzorg">
<a href="https://positronica.ru/catalog/pzorg/" class="dropdown-toggle pzorg">
Канцтовары </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzorg/" class="dropdown-menu-left__title_link">
Канцтовары </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzauto">
<a href="https://positronica.ru/catalog/pzauto/" class="dropdown-toggle pzauto">
Автотовары </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzauto/" class="dropdown-menu-left__title_link">
Автотовары </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzhoztovary">
<a href="https://positronica.ru/catalog/pzhoztovary/" class="dropdown-toggle pzhoztovary">
Хозтовары и продукты питания </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzhoztovary/" class="dropdown-menu-left__title_link">
Хозтовары и продукты питания </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
<li class="dropdown dropdown-submenu" data-sectioncode="pzucenennyj">
<a href="https://positronica.ru/catalog/pzucenennyj/" class="dropdown-toggle pzucenennyj">
Уцененный товар </a>
<span class="arrow--mobile arrow--right"></span>
<div class="dropdown-menu-left">
<div class="dropdown-menu-left__title">
<span class="arrow--mobile arrow--left"></span>
<a href="https://positronica.ru/catalog/pzucenennyj/" class="dropdown-menu-left__title_link">
Уцененный товар </a>
</div>
<ul class="block-text"></ul>
</div>
</li>
</ul>
</div>
</div>
</body></html>Необходимо, чтобы после подсветки меню, к пункту меню (li) добавлялся бы класс dropdown-submenu--open (и становился бы в один ряд с dropdown dropdown-submenu) (в результате справа показывается выпадающее меню благодаря опции --open). Подскажите, как к каждому пункту меню (всем) добавить обработчики событий покидания пункта меню мышкой меню и наведение на пункт меню мышкой.