<link rel="stylesheet" href="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu/css/slicknav.css">

<nav class="menu-navigation-round">
    <a href="http://www.freetimelearning.com/html-tutorial.php" class="selected">HTML</a>
    <a href="http://www.freetimelearning.com/html5-tutorial.php">HTML5</a>
    <a href="http://www.freetimelearning.com/css-basic-tutorial.php">CSS</a>
    <a href="http://www.freetimelearning.com/css3-tutorial.php">CSS3</a>
    <a href="http://www.freetimelearning.com/javascript-tutorial.php">JAVASCRIPT</a>
    <a href="http://www.freetimelearning.com/jquery-tutorial.php">JQUERY</a>
    <a href="http://www.freetimelearning.com/bootstrap-tutorial.php">BOOTSTRAP</a>
    <a href="http://www.freetimelearning.com/angularjs-tutorial.php">ANGULARJS</a>
	<a href="http://www.freetimelearning.com/java-tutorial.php">JAVA</a>
    <a href="http://www.freetimelearning.com/php-tutorial.php">PHP</a>
    <a href="http://www.freetimelearning.com/python-tutorial.php">PYTHON</a>
</nav>

<div class="menu">
    <h1 style="padding:10px 0px 0px;">Free Time Learning</h1>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu/js/jquery.slicknav.min.js"></script>
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700');
body{
	font:14px/1.5 Arial, Helvetica, sans-serif;
	margin:0;
}
.menu{
	text-align: center;
	padding-top: 25px;
	margin-bottom:100px;
}
.menu .arrow{
	opacity: 0.4;
}
.menu h1{
	margin-top:0;
	font: normal 32px/1.5 'Open Sans', sans-serif;
	color: #3F71AE;
	padding-bottom: 16px;
}
.menu h2{
	color: #F05283;
}
.menu h2 a{
	color:inherit;
	text-decoration: none;
	display: inline-block;
	border: 1px solid #F05283;
	padding: 10px 15px;
	border-radius: 3px;
	font: bold 14px/1 'Open Sans', sans-serif;
	text-transform: uppercase;
}

.menu h2 a:hover{
	background-color:#F05283;
	transition:0.2s;
	color:#fff;
}

.menu ul {
	max-width: 600px;
	margin: 60px auto 0;
}

.menu ul a{
	text-decoration: none;
	color: #FFF;
	text-align: left;
	background-color: #B9C1CA;
	padding: 10px 16px;
	border-radius: 2px;
	opacity: 0.8;
	font-size: 16px;
	display: inline-block;
	margin: 4px;
	line-height: 1;
	outline: none;

	transition: 0.2s ease;
}

.menu ul li a.active{
	background-color:#6C0;
	pointer-events: none;
}

.menu ul li a:hover {
	opacity: 1;
	background-color:#6C0;
}

.menu ul{
	list-style: none;
	padding: 0;
}

.menu ul li{
	display: inline-block;
}

@media (max-height:800px){
}

@media (max-width: 900px) {

	.menu {
		padding-top:40px;
		margin-bottom: 80px;
	}

}
.tz-link{
	text-decoration: none;
	color: #fff !important;
	font: bold 36px Arial,Helvetica,sans-serif !important;
}

.tz-link span{
	color: #da431c;
}
.menu-navigation-round {
    font:bold 12px Arial, Helvetica, sans-serif;
    text-align: center;
    margin-top: 30px;
}
.menu-navigation-round a {
    color: #748c99;
    margin: 0 20px auto;
    line-height: 2;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.menu-navigation-round a:hover {
    color: #FFF;
	background:#6C0;
	border-radius: 3px;
    padding: 10px 15px;
    margin: 0 5px auto;
}
.menu-navigation-round a.selected {
    color: #ffffff;
    background-color:#6C0;
    border-radius: 3px;
    padding: 10px 15px;
    margin: 0 5px auto;
}
.slicknav_menu {
    display:none;
}
@media (max-width: 600px) {
    .menu-navigation-round{
        display:none;
    }
    .slicknav_menu {
        display:block;
    }
}

$(function(){
	var menu = $('.menu-navigation-round');
	menu.slicknav();
	menu.on('click', 'a', function(){
		var a = $(this);
		a.siblings().removeClass('selected');
		a.addClass('selected');
	});
});

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.