<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<h1>HTML5 Navigation Menu</h1>

<div class="wrapper">
<nav class="green">
	<ul class="clear">
		<li class="active"><a href="http://www.freetimelearning.com/">Home</a></li>
		<li><a href="http://www.freetimelearning.com/html5-tutorial.php">HTML5</a></li>
		<li><a href="http://www.freetimelearning.com/css3-tutorial.php">CSS3</a></li>  
		<li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php">Bootstrap</a></li>
		<li><a href="http://www.freetimelearning.com/javascript-tutorial.php">JavaScript</a></li>
		<li><a href="http://www.freetimelearning.com/jquery-tutorial.php">jQuery</a></li>
		<li><a href="http://www.freetimelearning.com/angularjs-tutorial.php">AngularJS</a></li>
		<li><a href="http://www.freetimelearning.com/java-tutorial.php">Java</a></li>
		<li><a href="http://www.freetimelearning.com/php-tutorial.php">PHP</a></li>
		<li><a href="http://www.freetimelearning.com/python-tutorial.php">Python</a></li>
		<li><a href="#">Examples</a>
			<ul>
				<li><a href="http://www.freetimelearning.com/html/html-examples.php">HTML Examples</a></li>
				<li><a href="http://www.freetimelearning.com/html5/html5-examples.php">HTML5 Examples</a></li>
				<li><a href="http://www.freetimelearning.com/css-tutorial/css-examples.php">CSS Examples</a></li>
				<li><a href="http://www.freetimelearning.com/css3/css3-examples.php">CSS3 Examples</a></li>
				<li><a href="http://www.freetimelearning.com/javascript/javascript-examples.php">JavaScript Examples</a></li>
				<li><a href="http://www.freetimelearning.com/jquery/jquery-examples.php">jQuery Examples</a></li>
				<li><a href="http://www.freetimelearning.com/bootstrap/bootstrap-examples.php">Bootstrap Examples</a></li>
				<li><a href="http://www.freetimelearning.com/angularjs/angularjs-examples.php">AngularJS Examples</a></li>
			</ul>
		</li>
		<li><a href="http://www.freetimelearning.com/contact-us.php">Contact Us</a></li>
	</ul>
</nav>
</div>

.clear:after,
html[xmlns] .clear,
nav.green li a {
    display: block
}

body,
html {
    border: 0;
    margin: 0;
    padding: 0
}

body {
    font: 12px Arial, Helvetica, sans-serif;
    background: #F5F5F5;
    color: #444
}

.ftl,
h1 {
    font-style: italic;
    text-align: center
}

.wrapper {
    width: 1016px;
    margin: 30px auto
}

h1 {
    width: 960px;
    margin: 30px auto 5px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #0099da
}

.clear:after {
    content: ".";
    height: 0;
    clear: both;
    visibility: hidden
}

* html .clear {
    height: 1%
}

nav.green {
    border-top: 1px solid #4a5a19;
    border-bottom: 1px solid #34410b;
    border-radius: 3px
}

nav.green ul {
    margin: 0;
    padding: 0;
    border-left: 1px solid #4a5a19
}

nav.green li {
    list-style: none;
    float: left;
    border-right: 1px solid #4a5a19;
    position: relative
}

nav li.first a,
nav.green li.first {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    -moz-border-top-left-radius: 2px;
    -moz-border-bottom-left-radius: 2px
}

nav li.last a,
nav.green li.last {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    -moz-border-top-right-radius: 2px;
    -moz-border-bottom-right-radius: 2px
}

nav.green li.drop a {
    padding-right: 30px
}

nav.green li a {
    padding: 9px 20px 10px;
    text-decoration: none;
    background-image: url(../img/dropdown.png);
    background-repeat: repeat-x;
    font-size: 12px;
    color: #fff;
    border-top: 1px solid #839158;
    border-left: 1px solid #69793e;
    text-shadow: 0 -1px 0 #000;
    background-position: 0 0
}

nav li.active a,
nav.green li a:hover {
    background-position: 0 -36px
}

nav.green li a:active {
    background-position: 0 -72px
}

nav.green .dropdown {
    display: block;
    float: right;
    width: 7px;
    height: 5px;
    background: url(../img/drop-down.png) no-repeat;
    margin: -20px 15px 0 12px
}

nav.green li ul {
    opacity: 0;
    position: absolute;
    top: 45px;
    left: -26px;
    padding: 12px 15px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    background: #2b350d;
    display: none;
    z-index: 100
}

nav.green li ul li {
    border-right: 0;
    float: none!important;
    border-bottom: 1px solid #4d5b22;
    width: 140px
}

nav.green li ul li:last-child {
    border-bottom: 0
}

nav.green li ul li a {
    background: 0 0!important;
    border-left: 0;
    border-top: 0;
    padding: 10px 0;
    font-size: 11px
}

nav.green li ul li a:hover {
    color: #FF0
}

.clearfix {
    clear: both
}

.ftl {
    font-size: 16px;
    padding: 100px 0;
    font-weight: 700;
    margin: 0 auto
}

.ftl a {
    color: #09C;
    text-decoration: none
}

.ftl a:hover {
    color: #999
}

nav.green li ul li.arrow {
    background: url(../img/top_arrow.png) top left no-repeat;
    border-bottom: 0;
    height: 10px;
    margin-top: -22px;
    margin-bottom: 10px
}

$(document).ready(function(){
	$("nav ul li").hover(function() {
		$(this).addClass("active");
		$(this).find("ul").show().animate({opacity: 1}, 400);
		},function() {
		$(this).find("ul").hide().animate({opacity: 0}, 200);
		$(this).removeClass("active");
	});
	$('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
	$('nav ul li:first-child').addClass('first');
	$('nav ul li:last-child').addClass('last');
	$('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');

});