<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
<div class="container-fluid">
  <!-- Navbar -->
  <div class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	  </button>
	  <a class="navbar-brand" href="http://www.freetimelearning.com/"><img src="images/Free-Time-Learning.png" alt="Free Time Learning"></a>
	</div>
	<div class="navbar-collapse collapse">

	  <!-- Left nav -->
	  <ul class="nav navbar-nav">
		<li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php">BOOTSTRAP</a></li>
		<li><a href="http://www.freetimelearning.com/jquery-tutorial.php">JQUERY</a></li>
		<li><a href="http://www.freetimelearning.com/angularjs-tutorial.php">ANGULARJS</a></li>
		<li><a href="http://www.freetimelearning.com/java-tutorial.php">JAVA</a></li>
		<li><a href="http://www.freetimelearning.com/php-tutorial.php">PHP</a></li>
		<li><a href="http://www.freetimelearning.com/python-tutorial.php">PYTHON</a></li>
		<li><a href="#">DROPDOWN <span class="caret"></span></a>
		  <ul class="dropdown-menu">
			<li><a href="#">Sample Menu</a></li>
			<li><a href="#">Sample Menu</a></li>
			<li><a href="#">Sample Menu</a></li>
			<li><a href="#">Sample Sub Menu<span class="caret"></span></a>
			  <ul class="dropdown-menu">
			   <li><a href="#">Sample Menu 2</a></li>
				<li><a href="#">Sample Menu 2</a></li>
				<li><a href="#">Sample Menu 2</a></li>
				<li><a href="#">Sample Sub Menu<span class="caret"></span></a>
				  <ul class="dropdown-menu">
					<li><a href="#">Menu item</a></li>
					<li><a href="#">Menu item 1</a></li>
					<li><a href="#">Menu item 2</a></li>
					<li><a href="#">Menu item 3</a></li>
					<li><a href="#">Menu item 4</a></li>
					<li><a href="#">Menu item 5</a></li>
					<li><a href="#">Menu item 6</a></li>
					<li><a href="#">Menu item 7</a></li>
				  </ul>
				</li>
				<li><a href="#">Sample Menu 2</a></li>
				<li><a href="#">Sample Menu 2</a></li>
			  </ul>
			</li>
			<li><a href="#">Sample Menu</a></li>
		  </ul>
		</li>
	  </ul>

	  <!-- Right nav -->
	  <ul class="nav navbar-nav navbar-right">
		<li><a href="#">DROPDOWN <span class="caret"></span></a>
		  <ul class="dropdown-menu">
			<li><a href="#">Sample Menu</a></li>
			<li><a href="#">Sample Menu</a></li>
			<li><a href="#">Sample Menu</a></li>
			<li><a href="#">Sample Menu</a></li>
			<li><a href="#">Sample Sub Menu <span class="caret"></span></a>
			  <ul class="dropdown-menu">
				<li><a href="#">Sample Menu 2</a></li>
				<li><a href="#">Sample Menu 2</a></li>
				<li><a href="#">Sample Menu 2</a></li>
				<li><a href="#">Sample Menu 2</a></li>
			  </ul>
			</li>
			<li><a href="#">Sample Menu</a></li>
		  </ul>
		</li>
		<li><a href="">My ACCOUNT <span class="caret"></span></a>
			<ul class="dropdown-menu">
			<li><a href="#">My Profile</a></li>
			<li><a href="#">Logout</a></li>
		  </ul>
		</li>
		<li><a href="http://www.freetimelearning.com/contact-us.php">CONTACT</a></li>
	  </ul>

	</div>
  </div>
</div>
.navbar-nav:not(.sm-collapsible) ul .caret {
	position: absolute;
	right: 0;
	margin-top: 6px;
	margin-right: 15px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px dashed;
}
.navbar-nav:not(.sm-collapsible) ul a.has-submenu {
	padding-right: 30px;
}
.navbar-brand{ padding:5px 15px !important;}
.navbar-nav.sm-collapsible .caret, .navbar-nav.sm-collapsible ul .caret {
	position: absolute;
	right: 0;
	margin: -3px 15px 0 0;
	padding: 0;
	width: 32px;
	height: 26px;
	line-height: 24px;
	text-align: center;
	border-width: 1px;
 	border-style: solid;
}
.navbar-nav.sm-collapsible .caret:before {
	content: '+';
	font-family: monospace;
	font-weight: bold;
}
.navbar-nav.sm-collapsible .open > a > .caret:before {
	content: '-';
}
.navbar-nav.sm-collapsible a.has-submenu {
	padding-right: 50px;
}
/* revert to Bootstrap's default carets in collapsible mode when the "data-sm-skip-collapsible-behavior" attribute is set to the ul.navbar-nav */
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] .caret, .navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] ul .caret {
	position: static;
	margin: 0 0 0 2px;
	padding: 0;
	width: 0;
	height: 0;
	border-top: 4px dashed;
	border-right: 4px solid transparent;
	border-bottom: 0;
	border-left: 4px solid transparent;
}
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] .caret:before {
	content: '' !important;
}
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] a.has-submenu {
	padding-right: 15px;
}
/* scrolling arrows for tall menus */
.navbar-nav span.scroll-up, .navbar-nav span.scroll-down {
	position: absolute;
	display: none;
	visibility: hidden;
	height: 20px;
	overflow: hidden;
	text-align: center;
}
.navbar-nav span.scroll-up-arrow, .navbar-nav span.scroll-down-arrow {
	position: absolute;
	top: -2px;
	left: 50%;
	margin-left: -8px;
	width: 0;
	height: 0;
	overflow: hidden;
	border-top: 7px dashed transparent;
	border-right: 7px dashed transparent;
	border-bottom: 7px solid;
	border-left: 7px dashed transparent;
}
.navbar-nav span.scroll-down-arrow {
	top: 6px;
	border-top: 7px solid;
	border-right: 7px dashed transparent;
	border-bottom: 7px dashed transparent;
	border-left: 7px dashed transparent;
}
/* add more indentation for 2+ level sub in collapsible mode - Bootstrap normally supports just 1 level sub menus */
.navbar-nav.sm-collapsible ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul .dropdown-menu .dropdown-header {
	padding-left: 35px;
}
.navbar-nav.sm-collapsible ul ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul ul .dropdown-menu .dropdown-header {
	padding-left: 45px;
}
.navbar-nav.sm-collapsible ul ul ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul ul ul .dropdown-menu .dropdown-header {
	padding-left: 55px;
}
.navbar-nav.sm-collapsible ul ul ul ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul ul ul ul .dropdown-menu .dropdown-header {
	padding-left: 65px;
}
/* fix SmartMenus sub menus auto width (subMenusMinWidth and subMenusMaxWidth options) */
.navbar-nav .dropdown-menu > li > a {
	white-space: normal;
}
.navbar-nav ul.sm-nowrap > li > a {
	white-space: nowrap;
}
.navbar-nav.sm-collapsible ul.sm-nowrap > li > a {
	white-space: normal;
}
/* fix .navbar-right subs alignment */
.navbar-right ul.dropdown-menu {
	left: 0;
	right: auto;
}
.clearfix{ clear:both;} 
.ftl{ font-size:16px; font-style:italic; padding:100px 0px; font-weight:bold; margin:0px auto; text-align:center;} 
.ftl a{ color:#09C; text-decoration:none;} 
.ftl a:hover{ color:#999;}
/***   www.freetimelearning.com    ***/
(function(t) {
    "function" == typeof define && define.amd ? define(["jquery", "jquery.smartmenus"], t) : "object" == typeof module && "object" == typeof module.exports ? module.exports = t(require("jquery")) : t(jQuery)
})(function(t) {
    return t.extend(t.SmartMenus.Bootstrap = {}, {
        keydownFix: !1,
        init: function() {
            var e = t("ul.navbar-nav:not([data-sm-skip])");
            e.each(function() {
                function e() {
                    o.find("a.current").parent().addClass("active"), o.find("a.has-submenu").each(function() {
                        var e = t(this);
                        e.is('[data-toggle="dropdown"]') && e.dataSM("bs-data-toggle-dropdown", !0).removeAttr("data-toggle"), e.is('[role="button"]') && e.dataSM("bs-role-button", !0).removeAttr("role")
                    })
                }

                function s() {
                    o.find("a.current").parent().removeClass("active"), o.find("a.has-submenu").each(function() {
                        var e = t(this);
                        e.dataSM("bs-data-toggle-dropdown") && e.attr("data-toggle", "dropdown").removeDataSM("bs-data-toggle-dropdown"), e.dataSM("bs-role-button") && e.attr("role", "button").removeDataSM("bs-role-button")
                    })
                }

                function i(t) {
                    var e = a.getViewportWidth();
                    if (e != n || t) {
                        var s = o.find(".caret");
                        a.isCollapsible() ? (o.addClass("sm-collapsible"), o.is("[data-sm-skip-collapsible-behavior]") || s.addClass("navbar-toggle sub-arrow")) : (o.removeClass("sm-collapsible"), o.is("[data-sm-skip-collapsible-behavior]") || s.removeClass("navbar-toggle sub-arrow")), n = e
                    }
                }
                var o = t(this),
                    a = o.data("smartmenus");
                if (!a) {
                    o.smartmenus({
                        subMenusSubOffsetX: 2,
                        subMenusSubOffsetY: -6,
                        subIndicators: !1,
                        collapsibleShowFunction: null,
                        collapsibleHideFunction: null,
                        rightToLeftSubMenus: o.hasClass("navbar-right"),
                        bottomToTopSubMenus: o.closest(".navbar").hasClass("navbar-fixed-bottom")
                    }).bind({
                        "show.smapi": function(e, s) {
                            var i = t(s),
                                o = i.dataSM("scroll-arrows");
                            o && o.css("background-color", t(document.body).css("background-color")), i.parent().addClass("open")
                        },
                        "hide.smapi": function(e, s) {
                            t(s).parent().removeClass("open")
                        }
                    }), e(), a = o.data("smartmenus"), a.isCollapsible = function() {
                        return !/^(left|right)$/.test(this.$firstLink.parent().css("float"))
                    }, a.refresh = function() {
                        t.SmartMenus.prototype.refresh.call(this), e(), i(!0)
                    }, a.destroy = function(e) {
                        s(), t.SmartMenus.prototype.destroy.call(this, e)
                    }, o.is("[data-sm-skip-collapsible-behavior]") && o.bind({
                        "click.smapi": function(e, s) {
                            if (a.isCollapsible()) {
                                var i = t(s),
                                    o = i.parent().dataSM("sub");
                                if (o && o.dataSM("shown-before") && o.is(":visible")) return a.itemActivate(i), a.menuHide(o), !1
                            }
                        }
                    });
                    var n;
                    i(), t(window).bind("resize.smartmenus" + a.rootId, i)
                }
            }), e.length && !t.SmartMenus.Bootstrap.keydownFix && (t(document).off("keydown.bs.dropdown.data-api", ".dropdown-menu"), t.fn.dropdown && t.fn.dropdown.Constructor && t(document).on("keydown.bs.dropdown.data-api", '.dropdown-menu:not([id^="sm-"])', t.fn.dropdown.Constructor.prototype.keydown), t.SmartMenus.Bootstrap.keydownFix = !0)
        }
    }), t(t.SmartMenus.Bootstrap.init), t
});