Многоуровневая навигационная панель на Bootstrap

Для того, что бы на Bootstrap 4 и 5 сделать многоуровневое меню нужно в HTML разметке спроектировать наше меню

HTML

<div class="container-header4">
    <div class="container-header4-content">

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                    МЕНЮ
                    </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li class="dropdown-submenu">
                            <a class="dropdown-item dropdown-toggle" href="#">
                            Пункт субменю 1
                            </a>
                                <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Пункт субсубменю 1</a></li>
                                <li><a class="dropdown-item" href="#">Пункт субсубменю 1</a></li>
                                <li><a class="dropdown-item" href="#">Пункт субсубменю 1</a></li>
                                <li><a class="dropdown-item" href="#">Пункт субсубменю 1</a></li>
                                <li><a class="dropdown-item" href="#">Пункт субсубменю 1</a></li>
                                <li><a class="dropdown-item" href="#">Пункт субсубменю 1</a></li>
                                </ul>
                            </li>

                            <li class="dropdown-submenu">
                            <a class="dropdown-item dropdown-toggle" href="#">
                            Пункт субменю 2
                            </a>
                                <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Пункт субсубменю 2</a></li>
                                <li><a class="dropdown-item" href="#">Пункт субсубменю 2</a></li>
                                <li><a class="dropdown-item" href="#">Пункт субсубменю 2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="#">ДОСТАВКА И ОПЛАТА</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#">РАЗМЕРЫ</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#">АКЦИИ И СКИДКИ</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#">КОНТАКТЫ</a>
                    </li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>
</div>

в CSS мы напишем стили для нашего меню, в main.js вставим небольшой код

JS

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
    if (!$(this).next().hasClass('show')) {
      $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
    }
    var $subMenu = $(this).next('.dropdown-menu');
    $subMenu.toggleClass('show');
  
  
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass('show');
    });
  
  
    return false;
});

Получаем многоуровневое меню для нашего сайта.

Что бы субменю выходило на правую сторону, напишем CSS код, который сделает это, а так же развернет указатель. Не забыть при этом к нашим ul субменю добавить класс "submenuright": <ul class="dropdown-menu submenuright">

CSS

.container-header4__menu nav.navbar .dropdown:hover > .dropdown-menu {
    display: block;}
.container-header4__menu nav.navbar .dropdown-submenu:hover > .submenuright {
    display: flex;
    flex-wrap: wrap;} 

Чтобы это работало только на ПК версиях экранов, и не работало на мобильных устройствах, так как там просто отсутствует нормальная работа события hover. Я рекомендую прописать ниже еще вот такой код:

CSS

@media only screen and (max-device-width: 992px){
    nav.navbar .dropdown:hover .dropdown-menu{
        display: none;
    }
}