Как сделать выпадающее меню с колонками в WordPress?

Question

[Григорий Моргачев]

Стоит задача сделать такое меню:


Пробовал ставить разные плагины и писать свой walker для wp_nav_menu, но так и не удалось достичь такого разделения на колонки(

Ниже код вёрстки меню:

<div class="header-b__menu">
                <div class="header-b__item header-b__item_hasDrop">
                  <a href="#" class="header-b__links"><span>База недвижимости</span></a>

                  <div class="header-b__toggle header-b__toggle_columns">
                    <div class="header-b__toggle-inner">
                      <div class="header-b__toggle-grid">
                        <div class="header-b__toggle-column">
                          <div class="header-b__toggle-label">Сделка</div>
                          <div class="header-b__toggle-menu">
                            <a href="#" class="header-b__toggle-links">Продажа</a>
                            <a href="#" class="header-b__toggle-links">Аренда</a>
                          </div>
                        </div>
                        <div class="header-b__toggle-column">
                          <div class="header-b__toggle-label">Предложения</div>
                          <div class="header-b__toggle-menu">
                            <a href="#" class="header-b__toggle-links">Новостройки</a>
                            <a href="#" class="header-b__toggle-links">Вторичное</a>
                          </div>
                        </div>
                        <div class="header-b__toggle-column">
                          <div class="header-b__toggle-label">Тип</div>
                          <div class="header-b__toggle-menu">
                            <a href="#" class="header-b__toggle-links">Городская</a>
                            <a href="#" class="header-b__toggle-links">Загородная</a>
                          </div>
                        </div>
                        <div class="header-b__toggle-column">
                          <div class="header-b__toggle-label">Количество комнат</div>
                          <div class="header-b__toggle-menu">
                            <a href="#" class="header-b__toggle-links">Студии</a>
                            <a href="#" class="header-b__toggle-links">1-комнатные</a>
                            <a href="#" class="header-b__toggle-links">2-комнатные</a>
                            <a href="#" class="header-b__toggle-links">3-комнатные</a>
                            <a href="#" class="header-b__toggle-links">Многокомнатные (4+)</a>
                          </div>
                        </div>
                        <div class="header-b__toggle-column">
                          <div class="header-b__toggle-label">Районы Москвы</div>
                          <div class="header-b__toggle-menu">
                            <a href="#" class="header-b__toggle-links">ЮВАО</a>
                            <a href="#" class="header-b__toggle-links">ЮЗАО</a>
                            <a href="#" class="header-b__toggle-links">ЮАО</a>
                            <a href="#" class="header-b__toggle-links">ЦАО</a>
                            <a href="#" class="header-b__toggle-links">СВАО</a>
                            <a href="#" class="header-b__toggle-links">СЗАО</a>
                            <a href="#" class="header-b__toggle-links">ЗАО</a>
                            <a href="#" class="header-b__toggle-links">ВАО</a>
                            <a href="#" class="header-b__toggle-links">ЗАО</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="header-b__item header-b__item_hasDrop">
                  <a href="#" class="header-b__links"><span>Услуги</span></a>

                  <div class="header-b__toggle">
                    <div class="header-b__toggle-inner">
                      <div class="header-b__toggle-grid">
                        <div class="header-b__toggle-column">
                          <div class="header-b__toggle-menu">
                            <a href="#" class="header-b__toggle-links">Купить</a>
                            <a href="#" class="header-b__toggle-links">Снять</a>
                            <a href="#" class="header-b__toggle-links">Оценить</a>
                            <a href="#" class="header-b__toggle-links">Ипотека</a>
                            <a href="#" class="header-b__toggle-links">Подбор риэлтора</a>
                            <a href="#" class="header-b__toggle-links">Срочный выкуп</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="header-b__item"><a href="#" class="header-b__links"><span>О компании</span></a>
                </div>
                <div class="header-b__item"><a href="#" class="header-b__links"><span>Новости</span></a>
                </div>
                <div class="header-b__item"><a href="#" class="header-b__links"><span>Работа в АРТ</span></a>
                </div>
                <div class="header-b__item"><a href="#" class="header-b__links"><span>Контакты</span></a>
                </div>

                <div class="header-b__line"></div>
              </div>

Comments

[Kvason]

Какая проблема просто выровнять стилями?

[Григорий Моргачев]

Kvason, понимаю что можно разбить на колонки и стилями. Но это как-то костыльно, так как изначальная структура вёрстки теряется. Хотелось бы именно найти решение с этой вёрсткой