<nav id="main-nav" role="navigation">
  <!-- Sample menu definition -->
  <ul id="main-menu" class="sm ftl_color">
    <li><a href="http://www.freetimelearning.com/">HOME</a></li>
    <li><a href="http://www.freetimelearning.com/html5-tutorial.php">HTML5</a></li>
    <li><a href="http://www.freetimelearning.com/css3-tutorial.php">CSS3</a></li>
    <li><a href="http://www.freetimelearning.com/javascript-tutorial.php">JAVASCRIPT</a></li>
    <li><a href="http://www.freetimelearning.com/jquery-tutorial.php">JQUERY</a></li>
    <li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php">BOOTSTRAP</a></li>
    <li><a href="#">ANGULARJS</a>
      <ul>
        <li><a href="">Tutorial</a></li>
        <li><a href="http://www.freetimelearning.com/angularjs-tutorial.php">AngularJS</a>
          <ul>
            <li><a href="http://www.freetimelearning.com/angularjs-tutorial.php">Online Tutorial</a></li>
            <li><a href="http://www.freetimelearning.com/angularjs/angularjs-examples.php">Examples</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">BACKEND TUTORIALS</a>
      <ul>
        <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>
      </ul>
    </li>
    <li><a href="#">EXAMPLES</a>
      <ul>
        <li><a href="http://www.freetimelearning.com/html/html-examples.php">HTML Examples</a></li>
        <li><a href="http://www.freetimelearning.com/html5/html5-examples.php">HTML5 Examples</a></li>
        <li><a href="http://www.freetimelearning.com/css-tutorial/css-examples.php">CSS Examples</a></li>
        <li><a href="http://www.freetimelearning.com/css3/css3-examples.php">CSS3 Examples</a></li>
        <li><a href="http://www.freetimelearning.com/javascript/javascript-examples.php">JavaScript Examples</a></li>
        <li><a href="http://www.freetimelearning.com/jquery/jquery-examples.php">jQuery Examples</a></li>
        <li><a href="http://www.freetimelearning.com/bootstrap/bootstrap-examples.php">Bootstrap Examples</a></li>
        <li><a href="http://www.freetimelearning.com/angularjs/angularjs-examples.php">AngularJS Examples</a></li>

        <li><a href="#">more...</a>
          <ul>
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">more...</a>
              <ul>
                <li><a href="#">Sample Menu 1</a></li>
                <li><a href="#" class="current">A 'current' item</a></li>
                <li><a href="#">Sample Menu 1</a></li>
                <li><a href="#">more...</a>
                  <ul>
                    <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 1</a></li>
                <li><a href="#">Sample Menu 1</a></li>
              </ul>
            </li>
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">MEGA MENU</a>
      <ul class="mega-menu">
        <li>
          <!-- The mega drop down contents -->
          <div style="width:400px; max-width:100%;">
            <div style="padding:5px 20px;">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</nav>
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
.sm{position:relative;z-index:9999;}
.sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;text-align:left;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.sm-rtl,.sm-rtl ul,.sm-rtl li{direction:rtl;text-align:right;}
.sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0;}
.sm ul{display:none;}
.sm li,.sm a{position:relative;}
.sm a{display:block;}
.sm a.disabled{cursor:not-allowed;}
.sm:after{content:"\00a0";display:block;height:0;font:0px/0 serif;clear:both;visibility:hidden;overflow:hidden;}
.sm,.sm *,.sm *:before,.sm *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
body{ margin:0px;}
p{ line-height:24px; text-align:justify; font-family:"PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;}
.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;}
.ftl_color {
  background: transparent;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.ftl_color a, .ftl_color a:hover, .ftl_color a:focus, .ftl_color a:active {
  padding: 10px 20px;
  /* make room for the toggle button (sub indicator) */
  padding-right: 58px;
  background:#400040;
  color:#FFF;
  font-family:"PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 23px;
  text-decoration: none;
  border-bottom: #666 1px solid;
}
.ftl_color a.current {
  background:#303;
  color:#FFF;
}
.ftl_color a.disabled {
  color: #a1d1e8;
}
.ftl_color a span.sub-arrow {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: auto;
  right: 4px;
  width: 34px;
  height: 34px;
  overflow: hidden;
  font: bold 16px/34px monospace !important;
  text-align: center;
  text-shadow: none;
  background: rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
.ftl_color a.highlighted span.sub-arrow:before {
  display: block;
  content: '-';
}
.ftl_color > li:first-child > a, .ftl_color > li:first-child > :not(ul) a {
  -webkit-border-radius: 8px 8px 0 0;
  -moz-border-radius: 8px 8px 0 0;
  -ms-border-radius: 8px 8px 0 0;
  -o-border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
}
.ftl_color > li:last-child > a, .ftl_color > li:last-child > *:not(ul) a, .ftl_color > li:last-child > ul,
.ftl_color > li:last-child > ul > li:last-child > a, .ftl_color > li:last-child > ul > li:last-child > *:not(ul) a, .ftl_color > li:last-child > ul > li:last-child > ul,
.ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > a, .ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > ul,
.ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul,
.ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul {
  -webkit-border-radius: 0 0 8px 8px;
  -moz-border-radius: 0 0 8px 8px;
  -ms-border-radius: 0 0 8px 8px;
  -o-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
}
.ftl_color > li:last-child > a.highlighted, .ftl_color > li:last-child > *:not(ul) a.highlighted,
.ftl_color > li:last-child > ul > li:last-child > a.highlighted, .ftl_color > li:last-child > ul > li:last-child > *:not(ul) a.highlighted,
.ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted,
.ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted,
.ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .ftl_color > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}
.ftl_color ul {
  background: white;
}
.ftl_color ul ul {
  background: rgba(102, 102, 102, 0.1);
}
.ftl_color ul a, .ftl_color ul a:hover, .ftl_color ul a:focus, .ftl_color ul a:active {
  background: transparent;
  color: #2B002B;
  font-size: 14px;
  text-shadow: none;
  border-left: 8px solid transparent;
}
.ftl_color ul a.current {
  background: #006892;
  color:#FFF;
}
.ftl_color ul a.disabled {
  color: #b3b3b3;
}
.ftl_color ul ul a,
.ftl_color ul ul a:hover,
.ftl_color ul ul a:focus,
.ftl_color ul ul a:active {
  border-left: 16px solid transparent;
}
.ftl_color ul ul ul a,
.ftl_color ul ul ul a:hover,
.ftl_color ul ul ul a:focus,
.ftl_color ul ul ul a:active {
  border-left: 24px solid transparent;
}
.ftl_color ul ul ul ul a,
.ftl_color ul ul ul ul a:hover,
.ftl_color ul ul ul ul a:focus,
.ftl_color ul ul ul ul a:active {
  border-left: 32px solid transparent;
}
.ftl_color ul ul ul ul ul a,
.ftl_color ul ul ul ul ul a:hover,
.ftl_color ul ul ul ul ul a:focus,
.ftl_color ul ul ul ul ul a:active {
  border-left: 40px solid transparent;
}
.ftl_color ul li {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.ftl_color ul li:first-child {
  border-top: 0;
}

@media (min-width: 768px) {
  .ftl_color ul {
    position: absolute;
    width: 12em;
  }

  .ftl_color li {
    float: left;
  }

  .ftl_color.sm-rtl li {
    float: right;
  }

  .ftl_color ul li, .ftl_color.sm-rtl ul li, .ftl_color.sm-vertical li {
    float: none;
  }

  .ftl_color a {
    white-space: nowrap;
  }

  .ftl_color ul a, .ftl_color.sm-vertical a {
    white-space: normal;
  }

  .ftl_color .sm-nowrap > li > a, .ftl_color .sm-nowrap > li > :not(ul) a {
    white-space: nowrap;
  }

  /* ...end */
  .ftl_color {
    background: #400040;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  }
  .ftl_color a, .ftl_color a:hover, .ftl_color a:focus, .ftl_color a:active, .ftl_color a.highlighted {
    padding: 10px 20px;
    background:#400040;
    color:#FFF;
  }
  .ftl_color a:hover, .ftl_color a:focus, .ftl_color a:active, .ftl_color a.highlighted {
    background:#2B002B;
  }
  .ftl_color a.current {
    background: #006892;
    color:#FFF;
  }
  .ftl_color a.disabled {
    background: #3092c0;
    color: #a1d1e8;
  }
  .ftl_color a span.sub-arrow {
    top: auto;
    margin-top: 0;
    bottom: 2px;
    left: 50%;
    margin-left: -5px;
    right: auto;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid dashed dashed dashed;
    border-color: #a1d1e8 transparent transparent transparent;
    background: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
  }
  .ftl_color a.highlighted span.sub-arrow:before {
    display: none;
  }
  .ftl_color > li:first-child > a, .ftl_color > li:first-child > :not(ul) a {
    -webkit-border-radius:3px 0 0 3px;
    -moz-border-radius:3px 0 0 3px;
    -ms-border-radius:3px 0 0 3px;
    -o-border-radius:3px 0 0 3px;
    border-radius:3px 0 0 3px;
  }
  .ftl_color > li:last-child > a, .ftl_color > li:last-child > :not(ul) a {
    -webkit-border-radius: 0 3px 3px 0 !important;
    -moz-border-radius: 0 3px 3px 0 !important;
    -ms-border-radius: 0 3px 3px 0 !important;
    -o-border-radius: 0 3px 3px 0 !important;
    border-radius: 0 3px 3px 0 !important;
  }
  .ftl_color > li {
    border-left: 1px solid #666;
  }
  .ftl_color > li:first-child {
    border-left: 0;
  }
  .ftl_color ul {
    border: 1px solid #a8a8a8;
    padding: 7px 0;
    background:#FFF;
    -webkit-border-radius:0 0 2px 2px !important;
    -moz-border-radius:0 0 2px 2px !important;
    -ms-border-radius:0 0 2px 2px!important;
    -o-border-radius:0 0 2px 2px !important;
    border-radius:0 0 2px 2px !important;
    -webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  }
  .ftl_color ul ul {
    -webkit-border-radius:3px !important;
    -moz-border-radius:3px !important;
    -ms-border-radius:3px !important;
    -o-border-radius:3px !important;
    border-radius:3px !important;
    background:#FFF;
  }
  .ftl_color ul a, .ftl_color ul a:hover, .ftl_color ul a:focus, .ftl_color ul a:active, .ftl_color ul a.highlighted {
    border: 0 !important;
    padding: 5px 15px;
    background: transparent;
    color: #2B002B;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
    border-radius: 0 !important;
  }
  .ftl_color ul a:hover, .ftl_color ul a:focus, .ftl_color ul a:active, .ftl_color ul a.highlighted {
    background:#400040;
    color:#FFF;
  }
  .ftl_color ul a.current {
    background:#2B002B;
    color:#FFF;
  }
  .ftl_color ul a.disabled {
    background:#FFF;
    color: #b3b3b3;
  }
  .ftl_color ul a span.sub-arrow {
    top: 50%;
    margin-top: -5px;
    bottom: auto;
    left: auto;
    margin-left: 0;
    right: 10px;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #a1d1e8;
  }
  .ftl_color ul li {
    border: 0;
  }
  .ftl_color span.scroll-up,
  .ftl_color span.scroll-down {
    position: absolute;
    display: none;
    visibility: hidden;
    overflow: hidden;
    background: white;
    height: 20px;
  }
  .ftl_color span.scroll-up-arrow, .ftl_color span.scroll-down-arrow {
    position: absolute;
    top: -2px;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 8px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent #2B002B transparent;
  }
  .ftl_color span.scroll-down-arrow {
    top: 6px;
    border-style: solid dashed dashed dashed;
    border-color: #2B002B transparent transparent transparent;
  }
  .ftl_color.sm-rtl.sm-vertical a span.sub-arrow {
    right: auto;
    left: 10px;
    border-style: dashed solid dashed dashed;
    border-color: transparent #a1d1e8 transparent transparent;
  }
  .ftl_color.sm-rtl > li:first-child > a, .ftl_color.sm-rtl > li:first-child > :not(ul) a {
    -webkit-border-radius: 0 8px 8px 0;
    -moz-border-radius: 0 8px 8px 0;
    -ms-border-radius: 0 8px 8px 0;
    -o-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
  }
  .ftl_color.sm-rtl > li:last-child > a, .ftl_color.sm-rtl > li:last-child > :not(ul) a {
    -webkit-border-radius: 8px 0 0 8px !important;
    -moz-border-radius: 8px 0 0 8px !important;
    -ms-border-radius: 8px 0 0 8px !important;
    -o-border-radius: 8px 0 0 8px !important;
    border-radius: 8px 0 0 8px !important;
  }
  .ftl_color.sm-rtl > li:first-child {
    border-left: 1px solid #2B002B;
  }
  .ftl_color.sm-rtl > li:last-child {
    border-left: 0;
  }
  .ftl_color.sm-rtl ul a span.sub-arrow {
    right: auto;
    left: 10px;
    border-style: dashed solid dashed dashed;
    border-color: transparent #a1d1e8 transparent transparent;
  }
  .ftl_color.sm-vertical {
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  .ftl_color.sm-vertical a {
    padding: 9px 23px;
  }
  .ftl_color.sm-vertical a span.sub-arrow {
    top: 50%;
    margin-top: -5px;
    bottom: auto;
    left: auto;
    margin-left: 0;
    right: 10px;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #a1d1e8;
  }
  .ftl_color.sm-vertical > li:first-child > a, .ftl_color.sm-vertical > li:first-child > :not(ul) a {
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    -ms-border-radius: 8px 8px 0 0;
    -o-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
  }
  .ftl_color.sm-vertical > li:last-child > a, .ftl_color.sm-vertical > li:last-child > :not(ul) a {
    -webkit-border-radius: 0 0 8px 8px !important;
    -moz-border-radius: 0 0 8px 8px !important;
    -ms-border-radius: 0 0 8px 8px !important;
    -o-border-radius: 0 0 8px 8px !important;
    border-radius: 0 0 8px 8px !important;
  }
  .ftl_color.sm-vertical > li {
    border-left: 0 !important;
  }
  .ftl_color.sm-vertical ul {
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -ms-border-radius: 4px !important;
    -o-border-radius: 4px !important;
    border-radius: 4px !important;
  }
  .ftl_color.sm-vertical ul a {
    padding: 9px 23px;
  }
}
<script type="text/javascript" src="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu-6/js/jquery.js"></script>
<script type="text/javascript" src="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu-6/js/jquery_menu.js"></script>
<script type="text/javascript">
	$(function() {
		$('#main-menu').smartmenus({
			subMenusSubOffsetX: 1,
			subMenusSubOffsetY: -8
		});
	});
</script>