Q:

How to Make ZURB Foundation Top-Bar Dropdown Menu 100% Width?

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.
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).
If you hover over any of the top menu links on Mashable, you'll see the dropdown submenu I'd like to copy (just the structure, not the content).

I'm using Foundation 3.2 and have the <div class="contain-to-grid fixed"><nav class="top-bar"> setup so that it is fixed to the top and always 100% window width while the top-bar has a max-width: 1440px, just like the Mashable site.
Now I just need the dropdown (sub menu) part sussed out.

A:

This will reset your top bar submenu to be 100% of your top bar's width and will organise your submenu items in responsive columns, just as a flyout content but still preserving the navigation behavior on the small screen size 
@media only screen and (min-width: $screenSmall) {

    nav.top-bar > section > ul > li.has-dropdown{
        position: static;
        & > .dropdown{
            @include outerRow();

            & > li.has-dropdown{
                @include column(3);
                min-width: auto;

                .dropdown{
                    @include outerRow();
                    position: static;
                    visibility: inherit;
                    top: auto !important;
                    left: auto !important;
                    padding: 0;
                    min-width: auto;
                    li{
                        @include column(12);
                         min-width: auto;
                    }
                }
            }
        }
    }
}

