Vertical Menus, Free Vertical Menus, www.freetimelearning.com

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