Mega Menu Dropdowns with Foundation 5 add another sub level - zurb-foundation

Question

Can someone help me add another sub level to the "Graduate" menu, like in the screenshot below. I have tried a few things, all of which haven't worked.
e.g : Graduate ->(on image section graduate 1,graduate 2,graduate 3)
CodePen Demo
HTML:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>Logo</h1>
</li>
<li class="toggle-topbar menu-icon">
<span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li>
University
</li>
<li class="divider"></li>
<li class="has-dropdown">
Programs
<ul class="dropdown m-menu">
<li>
<div class="row">
<div class="medium-4 column">
<h3>Undergraduate</h3>
<ul>
<li>
<i class="icon-circle-right"></i>Admissions
</li>
<li>
<i class="icon-circle-right"></i>Academics
</li>
<li>
<i class="icon-circle-right"></i>Fields of Study
</li>
<li>
<i class="icon-circle-right"></i>Fees and Finance
</li>
<li>
<i class="icon-circle-right"></i>Useful Contacts
</li>
</ul>
</div>
<!--end of .column-->
<div class="medium-4 column">
<h3>Graduate</h3>
<ul>
<li>
<i class="icon-circle-right"></i>Admissions
</li>
<li>
<i class="icon-circle-right"></i>Academics
</li>
<li>
<i class="icon-circle-right"></i>Fields of Study
</li>
<li>
<i class="icon-circle-right"></i>Fees and Finance
</li>
</ul>
</div>
<!--end of .column-->
<div class="medium-4 column">
<h3>Online Learning</h3>
<ul>
<li>
<a href="#"><i class="icon-circle-right"></i>Why e-learning?</a
</li>
<li>
<i class="icon-circle-right"></i>Studies
</li>
<li>
<i class="icon-circle-right"></i>Date & Deadlines
</li>
<li>
<i class="icon-circle-right"></i>Fees and Finance
</li>
<li>
<i class="icon-circle-right"></i>Contact
</li>
</ul>
</div>
<!--end of .column-->
</div>
<!--end of .row-->
<div class="row">
<div class="medium-4 column">
<h3>Read</h3>
<a href="#" class="intro">
<i class="icon-play"></i>
<img src="https://unsplash.it/400/280?image=532" />
</a>
</div>
<!--end of .column-->
<div class="medium-4 column">
<h3>Build</h3>
<a href="#" class="intro">
<i class="icon-play"></i>
<img src="https://unsplash.it/400/280?image=534" />
</a>
</div>
<!--end of .column-->
<div class="medium-4 column">
<h3>Enjoy</h3>
<a href="#" class="intro">
<i class="icon-play"></i>
<img src="https://unsplash.it/400/280?image=452" />
</a>
</div>
<!--end of .column-->
</div>
<!--end of .row-->
</li>
</ul>
</li>
<li class="divider"></li>
<li>
Research
</li>
<li class="divider"></li>
<li class="has-dropdown">
Studies
<ul class="dropdown m-menu">
<li>
<div class="row">
<div class="medium-6 column show-for-medium-up">
<img src="https://unsplash.it/380/220?image=668" />
<div class="info-wrap">
<div class="info info-visible">
<h3>Select your program...</h3>
<p>More info...</p>
</div>
<div class="info">
<h3>Undergraduate Studies</h3>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
</div>
<div class="info">
<h3>Graduate Studies</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.</p>
</div>
<div class="info">
<h3>Internships</h3>
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae adipisci velit, sed quia non numquam eius.</p>
</div>
<div class="info">
<h3>Other Studies</h3>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
<div class="info">
<h3>Useful Contacts</h3>
<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat adipisci velit, sed quia non numquam eius.</p>
</div>
</div>
<!-- .info-wrap -->
</div>
<!--end of .column-->
<div class="medium-6 column">
<h3>Programs</h3>
<ul class="is-hover">
<li><i class="icon-circle-right"></i>Undergraduate</li>
<li><i class="icon-circle-right"></i>Graduate</li>
<li><i class="icon-circle-right"></i>Internships</li>
<li><i class="icon-circle-right"></i>Other</li>
<li><i class="icon-circle-right"></i>Contact</li>
</ul>
</div>
<!--end of .column-->
</div>
<!--end of .row-->
</li>
</ul>
</li>
<li class="divider"></li>
<li>
Student Life
</li>
<li class="divider"></li>
</ul>
</section>
</nav>
</div>
<!--end .contain-to-grid-->
<h2 class="dt">Responsive Mega Menus with Foundation 5</h2>
<p class="p">Demo by George Martsoukos. See article.</p>
jQuery/javascript:
$(document).foundation();
// below does the "Programs" info switch
$('.is-hover a').on('mouseover', function() {
var idx = $(this).parent().index() + 2;
$('.info:nth-child(' + idx + ')').addClass('info-visible');
$('.info:nth-child(' + idx + ')').siblings().removeClass('info-visible');
});
$('.dropdown').on('mouseout', function() {
$('.info:nth-child(1)').addClass('info-visible').siblings().removeClass('info-visible');
});