SmartMenus

Switch theme (class)

sm-blue sm-clean sm-mint sm-simple Customize "sm-blue" on Codepen
Horizontal full width main menu
justified
Note: Some themes may need minor changes like tweaking the main menu sub indicators' position, etc.
Horizontal main menu
left   center   right
Vertical main menu
Right-to-left

Source code

CSS:

<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />

<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />

<!-- #main-menu config - instance specific stuff not covered in the theme -->
<!-- You could put this in an external stylesheet (e.g. where the rest of your page styles are) -->
<style type="text/css">
</style>

HTML:

<nav id="main-nav">
	<ul id="main-menu" class="sm sm-blue">
		...
	</ul>
</nav>

JavaScript:

<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery init -->
<script type="text/javascript">
	$(function() {
		$('#main-menu').smartmenus({
			subMenusSubOffsetX: 1,
			subMenusSubOffsetY: -8
		});
	});
</script>