CodePen Embed - abdQEov


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  
  
  <header class="page-header navbar navbar-expand-sm navbar-light">
    <div class="container">
      <ul class="navbar-nav">
        <li class="nav-item dropdown catalog-toggle">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Каталог товаров</a>

          <div class="dropdown-menu p-0" aria-labelledby="navbarDropdown1">

            <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Назад</a>

            <ul class="menu ">
              <li class="menu-item">
                <div class="d-flex align-items-center">

                  <a href="#" class="dropdown-item">
                    Item 1
                  </a>

                  <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
                </div>

                <div class="dropdown-menu ">
                  <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Назад</a>

                  <div class="w-100 h-100 mCustomScrollbar">
                    <div class="row">
                      <div class="col-sm-9">
                        <div class="section-head justify-content-start">
                          <h2 class="section-title mr-4">
                            Item 1
                          </h2>

                          <a href="#" class="link">
                            Все категории
                          </a>
                        </div>

                        <div class="row grid">
                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Телефоны и гаджеты
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol1" role="button" aria-expanded="false" aria-controls="collapseCol1">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol1">
                                <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>

                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  ТВ и Видео
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol2" role="button" aria-expanded="false" aria-controls="collapseCol2">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol2">
                                <a href="#" class="dropdown-item">
                                  Телевизоры
                                </a>
                                <a href="#" class="dropdown-item">
                                  Проекторы
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-xl-3 d-none d-xl-block">
                        <h3>
                          Акция
                        </h3>

                        <div class="intro-item intro-box">
                          <img src="images/i-2.png" alt="">

                          <div class="intro-body">
                            <a href="#" class="link">
                              <strong>Подробнее</strong>
                            </a>
                          </div>
                        </div>

                        <div class="intro-item intro-box">
                          <img src="images/i-1.png" alt="">

                          <div class="intro-body text-right">
                            <a href="#" class="link">
                              <strong>Подробнее</strong>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>

              <li class="menu-item">
                <div class="d-flex align-items-center">

                  <a href="#" class="dropdown-item">
                    Item 2
                  </a>

                  <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
                </div>

                <div class="dropdown-menu ">
                  <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Назад</a>

                  <div class="w-100 h-100 mCustomScrollbar">
                    <div class="row ">
                      <div class="col-xl-9">
                        <div class="section-head justify-content-start">

                          <h2 class="section-title mr-4">
                            Компьютеры и периферия
                          </h2>

                          <a href="#" class="link">
                            Все категории
                          </a>
                        </div>

                        <div class="row grid">
                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Планшеты, ноутбуки, читалки
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol21" role="button" aria-expanded="false" aria-controls="collapseCol21">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol21">
                                <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-xl-3 d-none d-xl-block">
                        <h3>
                          Акция
                        </h3>

                        <div class="intro-item intro-box">
                          <img src="images/i-2.png" alt="">

                          <div class="intro-body">
                            <a href="#" class="link">
                              <strong>Подробнее</strong>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>

              <li class="menu-item">
                <div class="d-flex align-items-center">

                  <a href="#" class="dropdown-item">
                    Item 3
                  </a>

                  <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
                </div>

                <div class="dropdown-menu ">
                  <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Назад</a>

                  <div class="w-100 h-100 mCustomScrollbar">
                    <div class="row ">
                      <div class="col-xl-9">
                        <div class="section-head justify-content-start">

                          <h2 class="section-title mr-4">
                            Офисная техника и мебель
                          </h2>

                          <a href="#" class="link">
                            Все категории
                          </a>
                        </div>

                        <div class="row grid">
                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol31" role="button" aria-expanded="false" aria-controls="collapseCol31">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol31">
                                <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>

                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Периферия и аксессуары
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol32" role="button" aria-expanded="false" aria-controls="collapseCol32">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol32">
                                <a href="#" class="dropdown-item">
                                  Умные часы
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>

                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Манипуляторы и устройства ввода
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol33" role="button" aria-expanded="false" aria-controls="collapseCol33">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol33">
                                <a href="#" class="dropdown-item">
                                  Духовые инструменты
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>

                              </div>
                            </div>
                          </div>

                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Компьютеры
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol34" role="button" aria-expanded="false" aria-controls="collapseCol34">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol34">

                                <a href="#" class="dropdown-item">
                                  Цифровые плееры
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-xl-3 d-none d-xl-block">
                        <h3>
                          Акция
                        </h3>

                        <div class="intro-item intro-box">
                          <img src="images/i-2.png" alt="">

                          <div class="intro-body">
                            <a href="#" class="link">
                              <strong>Подробнее</strong>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>

              <li class="menu-item">
                <div class="d-flex align-items-center">

                  <a href="#" class="dropdown-item">
                    Item 4
                  </a>

                  <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
                </div>

                <div class="dropdown-menu ">
                  <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Назад</a>

                  <div class="w-100 h-100 mCustomScrollbar">
                    <div class="row ">
                      <div class="col-xl-9">
                        <div class="section-head justify-content-start">

                          <h2 class="section-title mr-4">
                            Авто и Мототовары
                          </h2>

                          <a href="#" class="link">
                            Все категории
                          </a>
                        </div>

                        <div class="row grid">
                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol41" role="button" aria-expanded="false" aria-controls="collapseCol41">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol41">
                                <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-xl-3 d-none d-xl-block">
                        <h3>
                          Акция
                        </h3>

                        <div class="intro-item intro-box">
                          <img src="images/i-2.png" alt="">

                          <div class="intro-body">
                            <a href="#" class="link">
                              <strong>Подробнее</strong>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>

              <li class="menu-item">
                <div class="d-flex align-items-center">

                  <a href="#" class="dropdown-item">
                    Item 5
                  </a>

                  <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
                </div>

                <div class="dropdown-menu ">
                  <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Назад</a>

                  <div class="w-100 h-100 mCustomScrollbar">
                    <div class="row ">
                      <div class="col-xl-9">
                        <div class="section-head justify-content-start">

                          <h2 class="section-title mr-4">
                            Бытовая техника
                          </h2>

                          <a href="#" class="link">
                            Все категории
                          </a>
                        </div>

                        <div class="row grid">
                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol51" role="button" aria-expanded="false" aria-controls="collapseCol51">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol51">
                                <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>
                                <a href="#" class="dropdown-item">
                                  Спортивные браслеты
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>

                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Периферия и аксессуары
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol52" role="button" aria-expanded="false" aria-controls="collapseCol52">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol52">
                                <a href="#" class="dropdown-item">
                                  Умные часы
                                </a>
                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-xl-3 d-none d-xl-block">
                        <h3>
                          Акция
                        </h3>

                        <div class="intro-item intro-box">
                          <img src="images/i-2.png" alt="">

                          <div class="intro-body">
                            <a href="#" class="link">
                              <strong>Подробнее</strong>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>

              <li class="menu-item">
                <div class="d-flex align-items-center">

                  <a href="#" class="dropdown-item">
                    Item 6
                  </a>

                  <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
                </div>

                <div class="dropdown-menu ">
                  <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Назад</a>

                  <div class="w-100 h-100 mCustomScrollbar">
                    <div class="row ">
                      <div class="col-xl-9">
                        <div class="section-head justify-content-start">

                          <h2 class="section-title mr-4">
                            Товары для дома
                          </h2>

                          <a href="#" class="link">
                            Все категории
                          </a>
                        </div>

                        <div class="row grid">
                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol61" role="button" aria-expanded="false" aria-controls="collapseCol61">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol61">
                                <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-xl-3 d-none d-xl-block">
                        <h3>
                          Акция
                        </h3>

                        <div class="intro-item intro-box">
                          <img src="images/i-2.png" alt="">

                          <div class="intro-body">
                            <a href="#" class="link">
                              <strong>Подробнее</strong>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>

              <li class="menu-item">
                <div class="d-flex align-items-center">
                  <a href="#" class="dropdown-item">
                    Item 7
                  </a>

                  <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
                </div>

                <div class="dropdown-menu ">
                  <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Назад</a>

                  <div class="w-100 h-100 mCustomScrollbar">
                    <div class="row ">
                      <div class="col-xl-9">
                        <div class="section-head justify-content-start">

                          <h2 class="section-title mr-4">
                            Строительство и ремонт
                          </h2>

                          <a href="#" class="link">
                            Все категории
                          </a>
                        </div>

                        <div class="row grid">
                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol71" role="button" aria-expanded="false" aria-controls="collapseCol71">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol71">
                                <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-xl-3 d-none d-xl-block">
                        <h3>
                          Акция
                        </h3>

                        <div class="intro-item intro-box">
                          <img src="images/i-2.png" alt="">

                          <div class="intro-body">
                            <a href="#" class="link">
                              <strong>Подробнее</strong>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>

              <li class="menu-item">
                <div class="d-flex align-items-center">

                  <a href="#" class="dropdown-item">
                    Item 8
                  </a>

                  <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
                </div>

                <div class="dropdown-menu ">
                  <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Назад</a>

                  <div class="w-100 h-100 mCustomScrollbar">
                    <div class="row ">
                      <div class="col-xl-9">
                        <div class="section-head justify-content-start">

                          <h2 class="section-title mr-4">
                            Сад и огород
                          </h2>

                          <a href="#" class="link">
                            Все категории
                          </a>
                        </div>

                        <div class="row grid">
                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol81" role="button" aria-expanded="false" aria-controls="collapseCol81">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol81">
                                <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-xl-3 d-none d-xl-block">
                        <h3>
                          Акция
                        </h3>

                        <div class="intro-item intro-box">
                          <img src="images/i-2.png" alt="">

                          <div class="intro-body">
                            <a href="#" class="link">
                              <strong>Подробнее</strong>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>

              <li class="menu-item">
                <div class="d-flex align-items-center">

                  <a href="#" class="dropdown-item">
                    Item 9
                  </a>

                  <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
                </div>

                <div class="dropdown-menu ">
                  <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Назад</a>

                  <div class="w-100 h-100 mCustomScrollbar">
                    <div class="row ">
                      <div class="col-xl-9">
                        <div class="section-head justify-content-start">

                          <h2 class="section-title mr-4">
                            Красота и здоровье
                          </h2>

                          <a href="#" class="link">
                            Все категории
                          </a>
                        </div>

                        <div class="row grid">
                          <div class="col-lg-6 col-xl-4 grid-item">
                            <div class="menu-col">
                              <div class="d-flex align-items-center">
                                <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                                <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol91" role="button" aria-expanded="false" aria-controls="collapseCol91">
                                  <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                                </a>
                              </div>

                              <div class="collapse show" id="collapseCol91">
                                <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                                <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-xl-3 d-none d-xl-block">
                        <h3>
                          Акция
                        </h3>

                        <div class="intro-item intro-box">
                          <img src="images/i-2.png" alt="">

                          <div class="intro-body">
                            <a href="#" class="link">
                              <strong>Подробнее</strong>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </header>

.navbar {
    padding: 0px 0px;
    margin: 0px;
    border-radius: 0px;
    border: none;
    display: block;
    position: relative;
    background: #fff;

    -webkit-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}


.page-header.sticky {
    position: fixed;
    top: -100px;
    left: 0;
    right: 0;
    z-index: 1000;
}

.navbar-brand {
    padding: 0;
    margin: 0;

    font-weight: 500;
    font-size: 40px;
    line-height: 40px;
    display: block;
    color: #1A2263 !important;
    text-decoration: none;
}

.navbar-brand:hover {
    color: #1A2263;
    text-decoration: none;
}


.navbar-nav .nav-link {
    font-weight: 500;

    -webkit-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}



.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0px;
    padding-right: 0px;
}

.navbar-expand-lg .navbar-nav .nav-item {
    margin-right: 2rem;
}

.navbar-light .navbar-nav .nav-link {
    color: #000;
}

.navbar-light .navbar-nav .dropdown .nav-link:after {
    border:none;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='7' viewBox='0 0 13 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6.5 6L12 1' stroke='%23000'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    position: absolute;
    top: 50%;
    margin-top: -5px;
}


.collapse-toggle-split,
.dropdown-toggle-split {
    background: transparent;
    border:none;
    padding: 0;
    margin: 0;
    width: 2rem;
    line-height: 2rem;
    text-align: center;

    margin-left: auto;
    z-index: 2;
    background: #FAFAFA;
    color: #000;

    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}



.dropdown-toggle-split[aria-expanded="true"] .icon {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.menu-item>.d-flex {
    width: 100%;
}

.collapse-toggle-split:hover {
    color: #000;
}

.dropdown-toggle-split:after {
    content: none;
}


.collapse-toggle-split .icon,
.dropdown-toggle-split .icon {
    width: 12px;
    height: 12px;
}

.navbar-light .navbar-nav-login .nav-link {
    color: #909599;
}

.navbar-light .navbar-toggler {
    border:none;
    width: 22px;
    height: 20px;
    padding: 0px;
    margin: 0px;
}

.navbar-light .navbar-toggler .icon {
    width: 100%;
    height: 100%;
}

.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;

    height: calc(95vh - 175px);
        overflow-y: auto;
}

.menu-item .dropdown-item {
    margin-bottom: 0px;
    line-height: 2rem;
    display: block;
    padding-top: .5rem;
    padding-bottom: .5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}




.navbar-light.navbar .navbar-nav .catalog-toggle>.dropdown-menu {
    max-width: 280px;
    width: 100%;
    min-width: 280px;
    /*height: 685px;  */


    height: calc(95vh - 175px);
}

.dropdown-toggle-back {
    display: none;
}

.navbar-light.navbar .navbar-nav .menu-item .dropdown-menu {
    /*-webkit-box-shadow: none;
    box-shadow: none;*/

    left: 280px !important;
    top: 0 !important;
    margin-top: 0;

    width: 900px;
    max-width: 940px;

    padding-left: 15px;
    padding-right: 15px;

    /*height: 685px;*/
    height: calc(95vh - 175px);

    -webkit-box-shadow: 7px 0px 16px rgba(0, 0, 0, 0.08);
    box-shadow: 7px 0px 16px rgba(0, 0, 0, 0.08);
}



.menu-item {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    /*position: relative;*/

    border-right: 1px solid #EFF1F4;
}

.menu-item+.menu-item {
    border-top: 1px solid #EFF1F4;
}

.menu .section-title,
.menu h3 {
    color: #1A2263;
    margin: 0 0 20px;
}

.menu .section-head .link {
    margin-bottom: 20px;
    line-height: 2.5rem;
}

.menu h3 {
    font-size: 1.25rem;
    line-height: 2.5rem;
}


/*.menu-col .collapse {
    display: block !important;
}*/

.menu-col-title {
    color: #1A2263;
    text-decoration: none;
    font-weight: 500;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.menu-col-title:hover {
    color: #1A2263;
    text-decoration: underline;
}

.menu-item>.dropdown-item {
    color: #000;
    text-decoration: none;
    font-weight: 500;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.menu-item>.dropdown-item:hover {
    color: #1A2263;
}


.menu-col {
    margin-bottom: 2rem;
}

.menu-col .dropdown-item {
    padding: 0;
    margin: 0;

}

.menu-icon {
    height: 1rem;
    width: 1rem;
    margin-right: .5rem;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;

    display: block;
    margin-right: .5rem;
    margin-left: 1rem;
}

.menu-icon .icon,
.menu-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

var $window = $(window);
$window.on('load resize', function(){
    console.log('load resize');

    if($(window).width() > 576){
         console.log('>576');

        $('.navbar-light.navbar .navbar-nav .menu-item .dropdown-menu').outerWidth($('.container').width() - 300);

        var timeout = null;


        $('.menu-item').mouseenter(function(){
            var $this = $(this);            

            console.log('mouseenter');

            clearTimeout(timeout);

           // timeout = setTimeout(function(){            

                if(!$this.hasClass('active')){                    
                    $this.addClass('active').siblings().removeClass('active');
                    $('.dropdown-toggle-split').attr('aria-expanded', 'false');
                    $this.find('.dropdown-toggle-split').attr('aria-expanded', 'true');                    
                    
                } else {
                    $this.removeClass('active');
                    $this.find('.dropdown-toggle-split').attr('aria-expanded', 'false');
                }


                if (!$this.find('.d-flex').next().hasClass('show')) {
                    $this.parents('.dropdown-menu').first().find('.show').removeClass('show');          
                }

                var $subMenu = $(this).find('.d-flex').next('.dropdown-menu');
                $subMenu.addClass('show');

            //}, 100);
            
        });

        $('.menu-item').mouseleave(function(){
            var $this = $(this);

            console.log('mouseleave');

            $this.removeClass('active');
            $this.find('.dropdown-toggle-split').attr('aria-expanded', 'false');

            clearTimeout(timeout);

            
            var $subMenu = $this.find('.d-flex').next('.dropdown-menu');
            $subMenu.removeClass('show');                
            
        });
    }
});

This Pen is owned by Elena on CodePen.

See more by @semenchenko on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.