<ul id="my_ftl_menu">
<li><a href="#" class="drop">Home</a>
<div class="dropdown_2columns">
<div class="ftl_col_2">
<h2>Free Time Learning</h2>
</div>
<div class="ftl_col_2">
<p>Web development is the range from developing plain text pages to complex web-based applications (Internet Applications), social network applications and electronic business applications. </p>
</div>
</div>
</li>
<li><a href="#" class="drop">Sample Content</a>
<div class="dropdown_5columns">
<div class="ftl_col_5">
<h2>Content in 5 columns</h2>
</div>
<div class="ftl_col_1">
<p class="black_box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="ftl_col_1">
<p class="italic">Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
<div class="ftl_col_1">
<p class="italic">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here.</p>
</div>
<div class="ftl_col_1">
<p class="italic">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
</div>
<div class="ftl_col_1">
<p class="italic">All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
</div>
</li>
<li><a href="#" class="drop">Tutorials & Examples</a>
<div class="dropdown_4columns">
<div class="ftl_col_4">
<h2>Tutorials & Examples</h2>
</div>
<div class="ftl_col_1">
<h3>Tutorials</h3>
<ul>
<li><a href="http://www.freetimelearning.com/html-tutorial.php">HTML</a></li>
<li><a href="http://www.freetimelearning.com/html5-tutorial.php">HTML5</a></li>
<li><a href="http://www.freetimelearning.com/css-basic-tutorial.php">CSSS</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>
</ul>
</div>
<div class="ftl_col_1">
<h3>Tutorials</h3>
<ul>
<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>
</ul>
</div>
<div class="ftl_col_1">
<h3>Examples</h3>
<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>
</ul>
</div>
<div class="ftl_col_1">
<h3>Examples</h3>
<ul>
<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>
</div>
</div>
</li>
<li class="menu_right"><a href="http://www.freetimelearning.com/contact-us.php">Contact Us</a></li>
<li class="menu_right"><a href="#" class="drop">Examples</a>
<div class="dropdown_1column align_right">
<div class="ftl_col_1">
<ul class="simple">
<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>
</div>
</div>
</li>
<li class="menu_right"><a href="#" class="drop">Tutorials</a>
<div class="dropdown_3columns align_right">
<div class="ftl_col_3">
<h2>All Tutorials</h2>
</div>
<div class="ftl_col_1">
<ul class="inner_box">
<li><a href="http://www.freetimelearning.com/html-tutorial.php">HTML</a></li>
<li><a href="http://www.freetimelearning.com/html5-tutorial.php">HTML5</a></li>
<li><a href="http://www.freetimelearning.com/css-basic-tutorial.php">CSSS</a></li>
<li><a href="http://www.freetimelearning.com/css3-tutorial.php">CSS3</a></li>
</ul>
</div>
<div class="ftl_col_1">
<ul class="inner_box">
<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>
</ul>
</div>
<div class="ftl_col_1">
<ul class="inner_box">
<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>
</ul>
</div>
<div class="ftl_col_3">
<h2>Examples</h2>
</div>
<div class="ftl_col_1">
<ul class="inner_box">
<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>
</ul>
</div>
<div class="ftl_col_1">
<ul class="inner_box">
<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>
</ul>
</div>
<div class="ftl_col_1">
<ul class="inner_box">
<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>
</div>
</div>
</li>
</ul>
#my_ftl_menu li a,
body,
li,
ul {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif
}
body,
li,
ul {
line-height: 21px;
text-align: left
}
#my_ftl_menu {
list-style: none;
width: 960px;
margin: 20px auto 0;
height: 43px;
padding: 0 20px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #f4f4f4;
background: -moz-linear-gradient(top, #f4f4f4 0, #f1f1f1 50%, #ededed 51%, #f6f6f6 100%);
background: -webkit-linear-gradient(top, #f4f4f4 0, #f1f1f1 50%, #ededed 51%, #f6f6f6 100%);
background: linear-gradient(to bottom, #f4f4f4 0, #f1f1f1 50%, #ededed 51%, #f6f6f6 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#f6f6f6', GradientType=0)
}
#my_ftl_menu li {
float: left;
display: block;
text-align: center;
position: relative;
padding: 4px 10px;
margin-right: 30px;
margin-top: 7px;
border: none
}
#my_ftl_menu li:hover {
border: 1px solid #EEE;
padding: 4px 9px;
background: #666;
border-radius: 3px;
color: #FFF
}
#my_ftl_menu li a {
color: #000;
display: block;
outline: 0;
text-decoration: none
}
#my_ftl_menu li:hover a {
color: #FFF
}
#my_ftl_menu li .drop {
padding-right: 21px;
background: url(../images/drop.png) right 8px no-repeat
}
#my_ftl_menu li:hover .drop {
background: url(../images/drop.png) right 7px no-repeat
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin: 4px auto;
float: left;
position: absolute;
left: -999em;
text-align: left;
padding: 10px 5px;
border: 1px solid #EEE;
border-top: none;
background: #666
}
.dropdown_1column {
width: 160px
}
.dropdown_2columns {
width: 320px
}
.dropdown_3columns {
width: 480px
}
.dropdown_4columns {
width: 680px
}
.dropdown_5columns {
width: 810px
}
#my_ftl_menu li:hover .dropdown_1column,
#my_ftl_menu li:hover .dropdown_2columns,
#my_ftl_menu li:hover .dropdown_3columns,
#my_ftl_menu li:hover .dropdown_4columns,
#my_ftl_menu li:hover .dropdown_5columns {
left: -1px;
top: auto
}
.ftl_col_1,
.ftl_col_2,
.ftl_col_3,
.ftl_col_4,
.ftl_col_5 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 5px
}
.ftl_col_1 {
width: 145px
}
.ftl_col_2 {
width: 290px
}
.ftl_col_3 {
width: 435px
}
.ftl_col_4 {
width: 600px
}
.ftl_col_5 {
width: 725px
}
#my_ftl_menu .menu_right {
float: right;
margin-right: 0
}
#my_ftl_menu h2,
#my_ftl_menu h3 {
margin: 7px 0 14px;
border-bottom: 1px solid #EEE
}
#my_ftl_menu li .align_right {
-moz-border-radius: 5px 0 5px 5px;
-webkit-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px
}
#my_ftl_menu li:hover .align_right {
left: auto;
right: -1px;
top: auto
}
#my_ftl_menu h2,
#my_ftl_menu h3,
#my_ftl_menu p,
#my_ftl_menu ul li {
font-family: Arial, Helvetica, sans-serif;
line-height: 21px;
font-size: 12px;
text-align: left
}
#my_ftl_menu h2 {
font-size: 21px;
font-weight: 400;
letter-spacing: -1px;
padding-bottom: 14px
}
.italic,
.strong {
font-weight: 700
}
#my_ftl_menu h3 {
font-size: 14px;
padding-bottom: 7px
}
#my_ftl_menu p {
line-height: 18px;
margin: 0 0 10px
}
#my_ftl_menu li:hover div a {
color: #FFF;
font-size: 14px
}
#my_ftl_menu li:hover div a:hover {
color: #6C0
}
.italic {
font-style: italic;
font-size: 13px
}
.imgshadow {
background: #FFF;
padding: 4px;
border: 1px solid #EEE;
margin-top: 5px;
-moz-box-shadow: 0 0 5px #666;
-webkit-box-shadow: 0 0 5px #666;
box-shadow: 0 0 5px #666
}
.img_left {
width: auto;
float: left;
margin: 5px 15px 5px 5px
}
#my_ftl_menu li .black_box {
background-color: #000;
color: #FFF;
padding: 4px 6px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 3px #000;
-moz-box-shadow: inset 0 0 3px #000;
box-shadow: inset 0 0 3px #000
}
#my_ftl_menu li ul {
list-style: none;
padding: 0;
margin: 0 0 12px
}
#my_ftl_menu li ul li {
font-size: 12px;
line-height: 24px;
position: relative;
padding: 0;
margin: 0;
float: none;
text-align: left;
width: 130px
}
#my_ftl_menu li ul li:hover {
background: 0 0;
border: none;
padding: 0;
margin: 0
}
.clearfix {
clear: both
}
.ftl {
font-size: 16px;
font-style: italic;
padding: 100px 0;
font-weight: 700;
margin: 0 auto;
text-align: center
}
.ftl a {
color: #09C;
text-decoration: none
}
.ftl a:hover {
color: #999
}
#my_ftl_menu li .inner_box li {
background: #090;
border: 1px solid #bbb;
margin: 0 0 4px;
padding: 4px 6px;
width: 110px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px
}
#my_ftl_menu li .inner_box li:hover {
background: #FFF;
border: 1px solid #EEE;
padding: 4px 6px;
margin: 0 0 4px;
color: #FFF!important
}