megamenu - Foundation 6 Mega Menu and Responsive Toggle Navigation with Drilldown Title Bar on Small -

i want create full-width dropdown mega menu can combine top bar has drilldown menu in mobile screens. method i've tried on foundation works foundation 5, since changed top bar in foundation 6.

so far, (with thread: http://foundation.zurb.com/forum/posts/36800-f6-and-mega-menus) have been able create dropdown mega menu , on small screens, title bar appears , toggles open. however, when try open item drilldown submenu, still treats though dropdown item.

also, noticing full-width hover submenus somehow pushing screen lot of empty space horizontally. while can rid of empty horizontal space adding max-width:100% dropdown-pane class, second of 2 mega submenus doesn't display full-width correctly when hover on them. although in codepen, show fine.

this link codepen: http://codepen.io/jen188/pen/pzrkbg

this code header;

<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 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 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 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 reia</h3></a></li>                         <li><a href="#"><img src="img/map-icon.png" alt="click 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 reia</a></li>                         <li><a href="#"><img src="http://placehold.it/500x250" alt="click 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 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 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 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 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 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 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 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 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> 

just remove width:100%, , max-width:100%, instead use width:auto, , left:0px !important , things work fine.