<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 &nbsp; </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;
}