<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<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>Frontend Tutorials</span></a>
      <ul>
         <li><a href='http://www.freetimelearning.com/html-tutorial.php'><span>HTML Tutorial</span></a></li>
         <li><a href='http://www.freetimelearning.com/html5-tutorial.php'><span>HTML5 Tutorial</span></a></li>
         <li><a href='http://www.freetimelearning.com/css-basic-tutorial.php'><span>CSS Tutorial</span></a></li>
         <li><a href='http://www.freetimelearning.com/css3-tutorial.php'><span>CSS3 Tutorial</span></a></li>
         <li><a href='http://www.freetimelearning.com/javascript-tutorial.php'><span>JavaScript Tutorial</span></a></li>
         <li><a href='http://www.freetimelearning.com/jquery-tutorial.php'><span>jQuery Tutorial</span></a></li>
         <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/angularjs-tutorial.php'><span>AngularJS Tutorial</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='#'><span>Backend Tutorials</span></a>
      <ul>
           <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 class='last'><a href='http://www.freetimelearning.com/python-tutorial.php'><span>Python</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Examples</span></a>
      <ul>
        <li><a href="http://www.freetimelearning.com/html/html-examples.php">HTML</a></li>
        <li><a href="http://www.freetimelearning.com/css-tutorial/css-examples.php">CSS</a></li>
        <li><a href="http://www.freetimelearning.com/html5/html5-examples.php">HTML5</a></li>
        <li><a href="http://www.freetimelearning.com/css3/css3-examples.php">CSS3</a></li>
        <li><a href="http://www.freetimelearning.com/javascript/javascript-examples.php">JavaScript</a></li>
        <li><a href="http://www.freetimelearning.com/jquery/jquery-examples.php">jQuery</a></li>
        <li><a href="http://www.freetimelearning.com/angularjs/angularjs-examples.php">AngularJS</a></li>
        <li><a href="http://www.freetimelearning.com/bootstrap/bootstrap-examples.php">Bootstrap</a></li>
      </ul>
   </li>
   <li class='last'><a href='http://www.freetimelearning.com/contact-us.php'><span>Contact</span></a></li>
</ul>
</div>

@charset 'UTF-8';
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#ftl_vr_menu,
#ftl_vr_menu a,
#ftl_vr_menu li,
#ftl_vr_menu ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: 400;
    text-decoration: none;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-variant: small-caps!important;
    position: relative
}

#ftl_vr_menu a {
    line-height: 1.3
}

#ftl_vr_menu {
    width: 250px
}

#ftl_vr_menu>ul>li>a {
    padding-right: 40px;
    font-weight: 700;
    display: block;
    background: #710000;
    color: #fff;
    border-bottom: 1px solid #590000
}

#ftl_vr_menu>ul>li>a>span {
    background: #A40000;
    padding: 12px 15px;
    display: block;
    font-size: 16px;
    font-weight: 300
}

#ftl_vr_menu>ul>li>a:hover {
    text-decoration: none
}

#ftl_vr_menu>ul>li.active {
    border-bottom: none
}

#ftl_vr_menu>ul>li.active>a {
    color: #fff
}

#ftl_vr_menu>ul>li.active>a span {
    background: #710000
}

#ftl_vr_menu span.cnt {
    position: absolute;
    top: 8px;
    right: 15px;
    padding: 0;
    margin: 0;
    background: 0 0
}

#ftl_vr_menu ul ul {
    display: none
}

#ftl_vr_menu ul ul li {
    border: 1px solid #e0e0e0;
    border-top: 0
}

#ftl_vr_menu ul ul a {
    padding: 10px;
    display: block;
    color: #ed1144;
    font-size: 13px
}

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

#ftl_vr_menu ul ul li.odd {
    background: #f4f4f4
}

#ftl_vr_menu ul ul li.even {
    background: #fff
}

.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
}

$( document ).ready(function() {
$(document).ready(function(){

$('#ftl_vr_menu> ul > li ul').each(function(index, e){
  var count = $(e).find('li').length;
  var content = '<span class="cnt">' + count + '</span>';
  $(e).closest('li').children('a').append(content);
});
$('#ftl_vr_menuul ul li:odd').addClass('odd');
$('#ftl_vr_menuul ul li:even').addClass('even');
$('#ftl_vr_menu> ul > li > a').click(function() {
  $('#ftl_vr_menuli').removeClass('active');
  $(this).closest('li').addClass('active');	
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#ftl_vr_menuul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;	
  }		
});
});
});