title: How to Make ZURB Foundation Top-Bar Dropdown Menu 100% Width?
body: <p>Did some searching but only found info for the megaBar. Would like to have 100% width dropdown widths and implement it with as little css/js on top of Foundation as possible.</p>
  
  <p>I'd like to do a sub menu (ul > li.has-dropdown -> ul.dropdown) that is 100% window width similar to the one on Mashable and shows on hover. The Foundation megaBar is outside of the nested nav structure but that's not what I'd like for my Wordpress template (want to stay in the nested walker type menu tree).</p>
  
  <p>If you hover over any of the top menu links on <a href="http://mashable.com" rel="nofollow noreferrer">Mashable</a>, you'll see the dropdown submenu I'd like to copy (just the structure, not the content).</p>
  
  <p><img src="https://i.stack.imgur.com/TnDDy.png" alt="Mashable top menu with dropdown"></p>
  
  <p>I'm using Foundation 3.2 and have the <code>&lt;div class="contain-to-grid fixed"&gt;&lt;nav class="top-bar"&gt;</code> setup so that it is fixed to the top and always 100% window width while the top-bar has a <code>max-width: 1440px</code>, just like the Mashable site.</p>
  
  <p>Now I just need the dropdown (sub menu) part sussed out.</p>