<div id='ftl_vr_menu'>
<ul>

	<li class='active'><a href='http://www.freetimelearning.com/'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Tutorials</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>HTML</span></a>
            <ul>
               <li><a href='http://www.freetimelearning.com/html-tutorial.php'><span>HTML Tutorial</span></a></li>
               <li class='last'><a href="http://www.freetimelearning.com/html/html-examples.php"><span>HTML Examples</span></a></li>
            </ul>
         </li>
         
         <li class='has-sub'><a href='#'><span>HTML5</span></a>
            <ul>
               <li><a href='http://www.freetimelearning.com/html5-tutorial.php'><span>HTML5 Tutorial</span></a></li>
               <li class='last'><a href="http://www.freetimelearning.com/html5/html5-examples.php"><span>HTML5 Examples</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>CSS</span></a>
            <ul>
               <li><a href='http://www.freetimelearning.com/css-basic-tutorial.php'><span>CSS Tutorial</span></a></li>
               <li class='last'><a href="http://www.freetimelearning.com/css-tutorial/css-examples.php"><span>CSS Examples</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>CSS3</span></a>
            <ul>
               <li><a href='http://www.freetimelearning.com/css3-tutorial.php'><span>CSS3 Tutorial</span></a></li>
               <li class='last'><a href="http://www.freetimelearning.com/css3/css3-examples.php"><span>CSS3 Examples</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Bootstrap</span></a>
            <ul>
               <li><a href='http://www.freetimelearning.com/bootstrap-tutorial.php'><span>Bootstrap Tutorial</span></a></li>
               <li class='last'><a href="http://www.freetimelearning.com/bootstrap/bootstrap-examples.php"><span>Bootstrap Examples</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>JavaScript</span></a>
            <ul>
               <li><a href='http://www.freetimelearning.com/javascript-tutorial.php'><span>JavaScript Tutorial</span></a></li>
               <li class='last'><a href="http://www.freetimelearning.com/javascript/javascript-examples.php"><span>JavaScript Examples</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>jQuery</span></a>
            <ul>
               <li><a href='http://www.freetimelearning.com/jquery-tutorial.php'><span>jQuery Tutorial</span></a></li>
               <li class='last'><a href="http://www.freetimelearning.com/jquery/jquery-examples.php"><span>jQuery Examples</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>AngularJS</span></a>
            <ul>
               <li><a href='http://www.freetimelearning.com/angularjs-tutorial.php'><span>AngularJS Tutorial</span></a></li>
               <li class='last'><a href="http://www.freetimelearning.com/angularjs/angularjs-examples.php"><span>AngularJS Examples</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='http://www.freetimelearning.com/java-tutorial.php'><span>Java</span></a></li>
   <li><a href='http://www.freetimelearning.com/php-tutorial.php'><span>PHP</span></a></li>
   <li><a href='http://www.freetimelearning.com/python-tutorial.php'><span>Python</span></a></li>
   <li class='last border_bottom'><a href='http://www.freetimelearning.com/contact-us.php'><span>Contact</span></a></li>
</ul>
</div>
#ftl_vr_menu:after,
#ftl_vr_menu:before {
    content: ''
}

#ftl_vr_menu li,
#ftl_vr_menu ul,
#ftl_vr_menu ul li {
    position: relative
}

#ftl_vr_menu {
    padding: 0;
    margin: 0;
    border: 0;
    line-height: 1;
    width: 250px;
    background: #333;
    font-family: Verdana, Geneva, sans-serif;
    zoom: 1;
    font-size: 12px
}

#ftl_vr_menu ul,
#ftl_vr_menu ul li,
#ftl_vr_menu ul ul {
    list-style: none;
    margin: 0;
    padding: 0
}

#ftl_vr_menu ul {
    z-index: 597;
    float: left
}

#ftl_vr_menu ul li {
    min-height: 1px;
    line-height: 1em;
    vertical-align: middle;
    float: none
}

#ftl_vr_menu ul li.hover,
#ftl_vr_menu ul li:hover {
    position: relative;
    z-index: 599;
    cursor: default
}

#ftl_vr_menu ul ul {
    visibility: hidden;
    position: absolute;
    z-index: 598;
    top: 1px;
    left: 99%;
    margin-top: 1px
}

#ftl_vr_menu ul li.has-sub>a:after,
#ftl_vr_menu.align-right ul li.has-sub>a:before {
    margin-top: -6px;
    top: 50%;
    content: '+';
    position: absolute
}

#ftl_vr_menu ul ul li {
    float: none
}

#ftl_vr_menu ul ul ul {
    top: -2px;
    right: 0
}

#ftl_vr_menu ul li:hover>ul {
    visibility: visible
}

#ftl_vr_menu:before {
    display: block
}

#ftl_vr_menu:after {
    display: table;
    clear: both
}

#ftl_vr_menu a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase
}

#ftl_vr_menu>ul {
    width: 250px
}

#ftl_vr_menu>ul>li>a {
    border-right: 5px solid #0099da;
    border-left: 5px solid #0099da;
    border-bottom: 1px solid #0099da;
    color: #fff
}

.border_bottom {
    border-bottom: 5px solid #0099da
}

#ftl_vr_menu>ul>li>a:hover {
    color: #fff
}

#ftl_vr_menu>ul>li a:hover,
#ftl_vr_menu>ul>li.active a,
#ftl_vr_menu>ul>li:hover a {
    background: #0099da
}

#ftl_vr_menu ul li.has-sub>a:after {
    right: 15px
}

#ftl_vr_menu ul ul li.first {
    -webkit-border-radius: 0 3px 0 0;
    -moz-border-radius: 0 3px 0 0;
    border-radius: 0 3px 0 0
}

#ftl_vr_menu ul ul li.last {
    -webkit-border-radius: 0 0 3px;
    -moz-border-radius: 0 0 3px;
    border-radius: 0 0 3px;
    border-bottom: 0
}

#ftl_vr_menu ul ul {
    width: 200px;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    border: 1px solid #0082e7
}

#ftl_vr_menu ul ul a {
    font-size: 12px;
    color: #fff
}

#ftl_vr_menu ul ul a:hover {
    color: #fff
}

#ftl_vr_menu ul ul li {
    font-weight: 400;
    border-bottom: 1px solid #0082e7
}

#ftl_vr_menu ul ul li:hover>a {
    background: #4eb1ff;
    color: #fff
}

#ftl_vr_menu.align-right>ul>li>a {
    border-left: 4px solid #0099da;
    border-right: none
}

#ftl_vr_menu.align-right {
    float: right
}

#ftl_vr_menu.align-right li {
    text-align: right
}

#ftl_vr_menu.align-right ul li.has-sub>a:before {
    left: 15px
}

#ftl_vr_menu.align-right ul li.has-sub>a:after {
    content: none
}

#ftl_vr_menu.align-right ul ul li.first {
    -webkit-border-radius: 3px 0 0;
    -moz-border-radius: 3px 0 0;
    border-radius: 3px 0 0
}

#ftl_vr_menu.align-right ul ul li.last {
    -webkit-border-radius: 0 0 0 3px;
    -moz-border-radius: 0 0 0 3px;
    border-radius: 0 0 0 3px
}

#ftl_vr_menu.align-right ul ul {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 598;
    width: 100%;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px
}

.clearfix {
    clear: both
}

.ftl {
    font-size: 16px;
    padding: 50px 0 20px;
    margin: 0 auto;
    font-style: italic;
    text-align: center;
}

.ftl a {
    color: #09C;
    text-decoration: none !important;
}

.ftl a:hover {
    color: #999
}

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.