Мега-меню Foundation 6 и отзывчивая тумблерная навигация с детализированной строкой заголовка на маленьком

Я хочу создать полноразмерное выпадающее мега-меню, которое я также могу объединить с верхней панелью, которая имеет раскрывающееся меню на мобильных экранах. Любой метод, который я пробовал на Foundation, работает только с Foundation 5, поскольку они изменили верхнюю панель в Foundation 6.

Пока (с помощью этой ветки: http://foundation.zurb.com/forum/posts/36800-f6-and-mega-menus) Мне удалось создать выпадающее мега-меню, и на маленьких экранах строка заголовка появляется и переключается на открытие. Однако, когда я пытаюсь открыть элемент с подменю раскрывающегося списка, он по-прежнему обрабатывает его как раскрывающийся элемент.

Кроме того, я замечаю, что при наведении курсора на подменю во всю ширину экран каким-то образом выталкивает экран на много лишнего пустого пространства по горизонтали. Хотя я могу избавиться от лишнего пустого горизонтального пространства, добавив max-width: 100% к классу раскрывающейся панели, второе из двух моих мега-подменю не отображается во всю ширину правильно, когда я наводю на них курсор. Хотя в коде они показывают просто отлично.

Это ссылка на код: http://codepen.io/jen188/pen/PzRkbg

Это код моего заголовка;

<header>
    <div class="row columns expanded">
      <a href="index.html"><img src="img/REPLogo.png" alt="Real Estate Promo" class="logo show-for-small-only" /></a>
      <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
      </div>

      <div class="top-bar" id="main-menu">
        <div class="top-bar-left"><a href="index.html"><img src="img/REPLogo.png" alt="Real Estate Promo" class="logo hide-for-small-only" /></div>

        <div class="top-bar-right">
          <ul class="vertical medium-horizontal expanded dropdown menu" data-responsive-menu="drilldown medium-dropdown">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Events Calendar</a></li>
            <li class="has-submenu is-drilldown-submenu-parent">
              <a href="#" class="dropdown" data-toggle="megamenu-resources">Resources
                <div class="dropdown-pane" id="megamenu-resources" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true">
                  <div class="row column expanded">
                    <div class="large-9 columns">
                      <div class="row column expanded">
                        <div class="large-4 columns">
                          <ul>
                            <li><a href="#"><h3>Foreclosure Laws</h3></a></li>
                            <li><a href="#"><img src="img/laws.png" alt="Click for More Info" /></a></li>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                          </ul>
                        </div>

                        <div class="large-4 columns">
                          <ul>
                            <li><a href="lenders.html"><h3>Hard Money Lenders</h3></a></li>
                            <li><a href="#"><img src="img/coin-stack.png" alt="Click for More Info" /></a></li>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                          </ul>
                        </div>

                        <div class="large-4 columns">
                          <ul>
                            <li><a href="glossary.html"><h3>Real Estate Glossary</h3></a></li>
                            <li><a href="#"><img src="http://placehold.it/500x250" alt="Click for More Info" /></a></li>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                          </ul>
                        </div>
                      </div>
                    </div>

                    <div class="large-3 columns">
                      <ul>
                        <li><a href="#"><h3>Find a REIA</h3></a></li>
                        <li><a href="#"><img src="img/map-icon.png" alt="Click for More Info"/></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>
                    <!-- <div class="small-12 large-3 columns">
                      <ul>
                        <li><a href="#">Find a REIA</a></li>
                        <li><a href="#"><img src="http://placehold.it/500x250" alt="Click for More Info"/></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div> -->
                    <!-- <div class="small-12 large-3 columns">

                    </div>
                    <div class="small-12 large-3 columns">
                      <ul>
                        <li><a href="lenders.html">Hard Money Lenders</a></li>
                        <li><a href="#"><img src="http://placehold.it/500x250" alt="Click for More Info"/></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>
                    <div class="small-12 large-3 columns">
                      <ul>
                        <li><a href="glossary.html">Real Estate Glossary</a></li>
                        <li><a href="#"><img src="http://placehold.it/500x250" alt="Click for More Info"/></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div> -->
                  </div>
                </div>
              </a>
            </li>
            <li class="has-submenu is-drilldown-submenu-parent">
              <a href="#" class="dropdown" data-toggle="megamenu-property-listings">Property Listings
                <div class="dropdown-pane" id="megamenu-property-listings" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true">
                  <div class="row column expanded">
                    <div class="small-12 large-3 columns">
                      <ul>
                        <li><a href="#">All Properties</a></li>
                        <li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>

                    <div class="small-12 large-4 columns">
                      <ul>
                        <li><a href="#">Single Family Properties</a></li>
                        <li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>

                    <div class="small-12 large-4 columns">
                      <ul>
                        <li><a href="#">Multi Family Properties</a></li>
                        <li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </a>
            </li>
            <li class="has-submenu is-drilldown-submenu-parent">
              <a href="#" class="dropdown" data-toggle="megamenu-websites">Get a Website
                <div class="dropdown-pane" id="megamenu-websites" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true">
                  <div class="row column expanded">
                    <div class="small-12 large-6 columns">
                      <ul>
                        <li><a href="#">Get Started</a></li>
                        <li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>
                    <div class="small-12 large-6 columns">
                      <ul>
                        <li><a href="#">Features</a></li>
                        <li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </a>
            </li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">Sign In</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>