<link rel="stylesheet" type="text/css" href="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu-9/css/default.css" />
<script src="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu-9/js/modernizr.custom.js"></script>
<div class="container">
<div class="main">
<nav id="ftl_menu" class="ftl_menu">
<ul>
<li><a href="#">Sample Menu</a></li>
<li>
<a href="#">Sample Menu 2</a>
<div class="ftl-hrsub">
<div class="ftl-hrsub-inner">
<div>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
</div>
</div><!-- /ftl-hrsub-inner -->
</div><!-- /ftl-hrsub -->
</li>
<li>
<a href="#">Sample Menu 3</a>
<div class="ftl-hrsub">
<div class="ftl-hrsub-inner">
<div>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
</div>
<div>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
</div>
<div>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
</div>
</div><!-- /ftl-hrsub-inner -->
</div><!-- /ftl-hrsub -->
</li>
<li>
<a href="#">Sample Menu 4</a>
<div class="ftl-hrsub">
<div class="ftl-hrsub-inner">
<div>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
</div>
<div>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
</div>
<div>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
</div>
</div><!-- /ftl-hrsub-inner -->
</div><!-- /ftl-hrsub -->
</li>
<li>
<a href="#">Sample Menu 5</a>
<div class="ftl-hrsub">
<div class="ftl-hrsub-inner">
<div>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
</div>
<div>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
</div>
<div>
<h4>Sample Heading</h4>
<ul>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
<li><a href="#">sample Item</a></li>
</ul>
</div>
</div><!-- /ftl-hrsub-inner -->
</div><!-- /ftl-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
.ftl_menu {
width: 100%;
margin-top: 2em;
border-top: 5px solid #8080C0;
border-bottom: 5px solid #8080C0;
}
/* general ul style */
.ftl_menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* first level ul style */
.ftl_menu > ul,
.ftl_menu .ftl-hrsub-inner {
width: 90%;
max-width: 70em;
margin: 0 auto;
padding: 0 1.875em;
}
.ftl_menu > ul > li {
display: inline-block;
}
.ftl_menu > ul > li > a {
font-weight: 700;
padding: 1em 2em;
color: #999;
display: inline-block;
}
.ftl_menu > ul > li > a:hover {
color: #8080C0;
}
.ftl_menu > ul > li.ftl-hropen a,
.ftl_menu > ul > li.ftl-hropen > a:hover {
color: #fff;
background: #8080C0;
}
/* sub-menu */
.ftl_menu .ftl-hrsub {
display: none;
position: absolute;
background: #8080C0;
width: 100%;
left: 0;
}
.ftl-hropen .ftl-hrsub {
display: block;
padding-bottom: 3em;
}
.ftl_menu .ftl-hrsub-inner > div {
width: 33%;
float: left;
padding: 0 2em 0;
}
.ftl_menu .ftl-hrsub-inner:before,
.ftl_menu .ftl-hrsub-inner:after {
content: " ";
display: table;
}
.ftl_menu .ftl-hrsub-inner:after {
clear: both;
}
.ftl_menu .ftl-hrsub-inner > div a {
line-height: 2em;
}
.ftl-hrsub h4 {
color:#FF0;
padding: 2em 0 0.6em;
margin: 0;
font-size: 160%;
font-weight: 300;
}
/* Examples for media queries */
@media screen and (max-width: 52.75em) {
.ftl_menu {
font-size: 80%;
}
}
@media screen and (max-width: 43em) {
.ftl_menu {
font-size: 120%;
border: none;
}
.ftl_menu > ul,
.ftl_menu .ftl-hrsub-inner {
width: 100%;
padding: 0;
}
.ftl_menu .ftl-hrsub-inner {
padding: 0 2em;
font-size: 75%;
}
.ftl_menu > ul > li {
display: block;
border-bottom: 2px solid #8080C0;
}
.ftl_menu > ul > li > a {
display: block;
padding: 0.7em 3em;
}
.ftl_menu .ftl-hrsub {
position: relative;
}
.ftl-hrsub h4 {
padding-top: 0.6em;
}
}
@media screen and (max-width: 36em) {
.ftl_menu .ftl-hrsub-inner > div {
width: 100%;
float: none;
padding: 0 2em;
}
}
.clearfix{ clear:both;}
.ftl{ font-size:16px; font-style:italic; color:#000; padding:100px 0px; font-weight:bold; margin:0px auto; text-align:center;}
.ftl a{ color:#09C; text-decoration:none;}
.ftl a:hover{ color:#999;}
var ftlHorizontalMenu = (function() {
var b = $("#ftl_menu > ul > li"),
g = b.children("a"),
c = $("body"),
d = -1;
function f() {
g.on("click", a);
b.on("click", function(h) {
h.stopPropagation()
})
}
function a(j) {
if (d !== -1) {
b.eq(d).removeClass("ftl-hropen")
}
var i = $(j.currentTarget).parent("li"),
h = i.index();
if (d === h) {
i.removeClass("ftl-hropen");
d = -1
} else {
i.addClass("ftl-hropen");
d = h;
c.off("click").on("click", e)
}
return false
}
function e(h) {
b.eq(d).removeClass("ftl-hropen");
d = -1
}
return {
init: f
}
})();
$(function() {
ftlHorizontalMenu.init();
});