Static Menus, Vertical Menus, Horizontal Menus

<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>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'><a href='http://www.freetimelearning.com/contact-us.php'><span>Contact</span></a></li>
</ul>
</div>

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);
#ftl_vr_menu,
#ftl_vr_menu ul li {
    margin: 0;
    position: relative
}

#ftl_vr_menu {
    font-family: 'Roboto Condensed';
    line-height: 1;
    width: 270px
}

.align-right {
    float: right
}

#ftl_vr_menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block
}

#ftl_vr_menu ul li {
    padding: 0
}

#ftl_vr_menu ul li a {
    text-decoration: none;
    cursor: pointer
}

#ftl_vr_menu>ul>li>a {
    color: #ddd;
    text-transform: uppercase;
    display: block;
    padding: 20px;
    border-top: 1px solid #CCC;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    background: #0BB;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    letter-spacing: 1px;
    font-size: 16px;
    font-weight: 300;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    transition: all .25s ease-in;
    position: relative
}

#ftl_vr_menu ul>li.has-sub::after,
#ftl_vr_menu ul>li.has-sub>a::after,
#ftl_vr_menu ul>li.has-sub>a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    display: block
}

#ftl_vr_menu>ul>li:first-child>a {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px
}

#ftl_vr_menu>ul>li:last-child>a {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom: 1px solid #CCC
}

#ftl_vr_menu>ul>li.active>a,
#ftl_vr_menu>ul>li.open>a,
#ftl_vr_menu>ul>li:hover>a {
    background: #0BB;
    color: #fff
}

#ftl_vr_menu ul>li.has-sub>a::after {
    left: 0;
    bottom: -13px;
    bottom: 0;
    z-index: 1;
    opacity: 0
}

#ftl_vr_menu ul>li.has-sub>a::before {
    left: 0;
    bottom: -12px;
    bottom: -1px;
    z-index: 3;
    opacity: 0
}

#ftl_vr_menu ul>li.has-sub::after {
    border: 7px solid transparent;
    border-top-color: #ddd;
    z-index: 2;
    right: 20px;
    top: 24.5px;
    pointer-events: none
}

#ftl_vr_menu ul>li.active::after,
#ftl_vr_menu ul>li.open::after,
#ftl_vr_menu ul>li:hover::after {
    border-top-color: #fff
}

#ftl_vr_menu ul>li.has-sub.open>a::after {
    opacity: 1;
    bottom: -13px
}

#ftl_vr_menu ul>li.has-sub.open>a::before {
    opacity: 1;
    bottom: -12px
}

#ftl_vr_menu ul ul {
    display: none
}

#ftl_vr_menu ul ul li {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc
}

#ftl_vr_menu ul ul li a {
    background: #f1f1f1;
    display: block;
    position: relative;
    font-size: 15px;
    padding: 14px 20px;
    border-bottom: 1px solid #ddd;
    color: #777;
    font-weight: 300;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    transition: all .25s ease-in
}

#ftl_vr_menu ul ul li:first-child>a {
    padding-top: 18px
}

#ftl_vr_menu ul ul ul li {
    border: 0
}

#ftl_vr_menu ul ul li.active>a,
#ftl_vr_menu ul ul li.open>a,
#ftl_vr_menu ul ul li:hover>a {
    background: #e4e4e4;
    color: #666
}

#ftl_vr_menu ul ul ul li a {
    padding-left: 30px;
    background: #FFF
}

#ftl_vr_menu ul ul>li.has-sub::after {
    top: 18.5px;
    border-width: 6px;
    border-top-color: #777
}

#ftl_vr_menu ul ul>li.active::after,
#ftl_vr_menu ul ul>li.open::after,
#ftl_vr_menu ul ul>li:hover::after {
    border-top-color: #666
}

.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() {
$('#ftl_vr_menu li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp();
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown();
			element.siblings('li').children('ul').slideUp();
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp();
		}
	});
});