Full width Foundation 6 dropdown accordion menu - zurb-foundation

Question

Does anyone know how to make the drop down be the full width of the navigation in this example? I'm at my wits end on this one.
Codepen here
<!-- This demo uses float grid but you can use flex grid too -->
<div class="row">
<div class="columns">
<h3>Responsive Menu - Accordion Dropdown combo</h3>
<p>Same like drilldowns, an accordion menu works well on mobile, but on larger screens, you may want to convert that same menu into a dropdown. Here's an example for the same:</p>
</div>
</div>
<div class="row">
<div class="columns">
<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
<li>
Item 1
<ul class="vertical menu">
<li>
Item 1A
<ul class="vertical menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
<li>Item 1D</li>
<li>Item 1E</li>
</ul>
</li>
<li>Item 1B</li>
</ul>
</li>
<li>
Item 2
<ul class="vertical menu">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
<li>
Item 3
<ul class="vertical menu">
<li>Item 3A</li>
<li>Item 3B</li>
</ul>
</li>
</ul>
</div>
</div>
I'm that there are some other approaches. However, I need this to also become an accordion on mobile, be responsive with a hamburger toggle, and use click rather than hover to trigger on desktop. So this solution is super close, and trying to make the dropdown be full width seemed (at least at face value) to be the simplest solution.