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