JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://vadikom.github.io/smartmenus/src/jquery.smartmenus.js"></script>
<link rel="stylesheet" href="http://vadikom.github.io/smartmenus/src/css/sm-core-css.css">
<link rel="stylesheet" href="http://vadikom.github.io/smartmenus/src/css/sm-blue/sm-blue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css">
<ul id="main-menu" class="sm sm-blue">
<li><a href="#">Home</a></li>
<li><a href="#/">About</a>
<ul>
<li><a href="#">Introduction to SmartMenus jQuery</a></li>
<li><a href="#">Themes</a></li>
<li><a href="#">The author</a></li>
<li><a href="#">The company</a>
<ul>
<li><a href="#">About Vadikom</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</li>
<li><a href="#">Old SmartMenus versions</a></li>
</ul>
</li>
<li><a href="#">Mega menu</a>
<ul class="mega-menu"> <!-- got the class -->
<li>some text
<!-- The mega drop down contents -->
<ul class="small-block-grid-1 large-block-grid-3">
<li><img class="th" src="http://placehold.it/350x150" /></li>
<li><img class="th" src="http://placehold.it/350x150" /></li>
<li><img class="th" src="http://placehold.it/350x150g" /></li>
</ul>
<!-- End mega content -->
</li>
</ul>
</li>
</ul>
CSS
ul.mega-menu ul {
display: block;
position: static;
top: auto;
width: 500px;
max-width: 100%;
}
JavaScript
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8,
subMenusMaxWidth: ''
});
});