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)
HTML:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">Logo</a></h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li>
<a href="#">University</a>
</li>
<li class="divider"></li>
<li class="has-dropdown">
<a href="#">Programs</a>
<ul class="dropdown m-menu">
<li>
<div class="row">
<div class="medium-4 column">
<h3>Undergraduate</h3>
<ul>
<li>
<a href="#"><i class="icon-circle-right"></i>Admissions</a>
</li>
<li>
<a href="#"><i class="icon-circle-right"></i>Academics</a>
</li>
<li>
<a href="#"><i class="icon-circle-right"></i>Fields of Study</a>
</li>
<li>
<a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
</li>
<li>
<a href="#"><i class="icon-circle-right"></i>Useful Contacts</a>
</li>
</ul>
</div>
<!--end of .column-->
<div class="medium-4 column">
<h3>Graduate</h3>
<ul>
<li>
<a href="#"><i class="icon-circle-right"></i>Admissions</a>
</li>
<li>
<a href="#"><i class="icon-circle-right"></i>Academics</a>
</li>
<li>
<a href="#"><i class="icon-circle-right"></i>Fields of Study</a>
</li>
<li>
<a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
</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>
<a href="#"><i class="icon-circle-right"></i>Studies</a>
</li>
<li>
<a href="#"><i class="icon-circle-right"></i>Date & Deadlines</a>
</li>
<li>
<a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
</li>
<li>
<a href="#"><i class="icon-circle-right"></i>Contact</a>
</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>
<a href="#">Research</a>
</li>
<li class="divider"></li>
<li class="has-dropdown">
<a href="#">Studies</a>
<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><a href="#"><i class="icon-circle-right"></i>Undergraduate</a></li>
<li><a href="#"><i class="icon-circle-right"></i>Graduate</a></li>
<li><a href="#"><i class="icon-circle-right"></i>Internships</a></li>
<li><a href="#"><i class="icon-circle-right"></i>Other</a></li>
<li><a href="#"><i class="icon-circle-right"></i>Contact</a></li>
</ul>
</div>
<!--end of .column-->
</div>
<!--end of .row-->
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="#">Student Life</a>
</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. <a href="http://www.sitepoint.com/building-responsive-mega-menu-foundation" target="_blank">See article</a>.</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');
});
