<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
}