Фонд 6 Mega Menu и отзывчивая переключение навигации с помощью Drilldown Title Bar на Small

Question

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

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

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

Это ссылка на codepen: 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> 

Answer 1

Просто удалите width:100% и max-width:100%, Вместо этого используйте width:auto и left:0px !important и все отлично работает.