<header class="main-header">
<a class="logo" href="#"><img src="Free-Time-Learning.png" alt="Free Time Learning"></a>
<ul class="main-nav">
<li><a href="http://www.freetimelearning.com/html5/index.php">HTML5</a></li>
<li><a href="http://www.freetimelearning.com/css3/index.php">CSS3</a></li>
<li><a href="http://www.freetimelearning.com/javascript/index.php">JAVASCRIPT</a></li>
<li><a href="http://www.freetimelearning.com/jquery/index.php">JQUERY</a></li>
<li><a href="http://www.freetimelearning.com/bootstrap/index.php">BOOTSTRAP</a></li>
<li><a href="http://www.freetimelearning.com/angularjs/index.php">ANGULARJS</a></li>
<li class="dropdown">
<a href="#">BACKEND </a>
<ul class="drop-nav">
<li><a href="http://www.freetimelearning.com/java/index.php">JAVA</a></li>
<li><a href="http://www.freetimelearning.com/php/index.php">PHP</a></li>
<li><a href="http://www.freetimelearning.com/python/index.php">PYTHON</a></li>
<li class="flyout">
<a href="#">Examples</a>
<ul class="flyout-nav">
<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>
</ul>
</li>
<li><a href="http://www.freetimelearning.com/contact-us.php">CONTACT</a></li>
</ul>
</header>
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
background: #FFF;
color: #fff;
font-family: sans-serif;
line-height: 1.5;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
.main-header {
margin: auto;
width: 90%;
min-height: 50px;
padding: 5px 2em;
border: 2px solid #390;
margin-top:5px;
border-radius:3px;
background:#EEE;
}
.main-header:after {
content: " ";
display: table;
clear: both;
}
.logo {
display: block;
text-decoration: none;
float: left;
margin-top: 0px;
}
.clearfix{clear:both}
.ftl{font-size:16px;padding:150px 0 20px;margin:0 auto;font-style:italic;text-align:center; color:#000;}
.ftl a{color:#09C;text-decoration:none !important;}
.ftl a:hover{color:#999}
.main-nav,
.drop-nav {
background:#390;
}
.main-nav {
float: right;
border-radius: 2px;
margin-top: 0px;
border: solid 1px #1e2a36;
}
.main-nav > li {
float: left;
border-left: solid 1px #1e2a36;
}
.main-nav li:first-child {
border-left: none;
}
.main-nav a {
color: #fff;
display: block;
padding: 7px 20px;
text-decoration: none;
}
.dropdown,
.flyout {
position: relative;
}
.dropdown:after {
content: "\25BC";
font-size: .5em;
display: block;
position: absolute;
top: 38%;
right: 12%;
}
.drop-nav,
.flyout-nav {
position: absolute;
display: none;
}
.drop-nav li {
border-bottom: 1px solid rgba(255,255,255,.2);
}
.dropdown:hover > .drop-nav,
.flyout:hover > .flyout-nav {
display: block;
}
.flyout-nav {
left: 100%;
top: 0;
}
.flyout:hover a,
.flyout-nav {
background:#006400;
}
.flyout:hover a:hover,
.flyout-nav {
background:#004000;
}