<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');
	});
});