MENU

<!-- mega menu start -->

<div class='Flat_mega_menu'>

<i class='fa fa-bars'/> <!-- fontawesome mobile button icon -->
<input class='mobile_button' type='checkbox'> <!-- checkbox button for mobile to expand submenu -->

<ul>
    <li><a href='#'>Ultra Mag</a></li>
    <li><a href='#'>Design</a>
        <ul class='submenu one_col'> <!-- submenu with one column -->
            <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><i class='fa fa-angle-right'/><a href='#'>E-Commerce</a>
                <ul class='submenu one_col'> <!-- submenu with one column -->
            <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Magento</a></li>
                <li><i class='fa fa-angle-right'/><a href='#'>Joomla</a>
                        <ul class='submenu one_col'> <!-- submenu with one column -->
            <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><a href='#'>E-Commerce</a></li>
                <li><a href='#'>UI-UX-Design</a></li>
            </ul>
                        </li>
                <li><a href='#'>E-Commerce</a></li>
                <li><a href='#'>UI-UX-Design</a></li>
            </ul>
                </li>
                <li><a href='#'>UI-UX-Design</a></li>
                <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><a href='#'>E-Commerce</a></li>
                <li><a href='#'>UI-UX-Design</a></li>
            </ul>
        </li>
    <li><a href='#'>Freebies</a>
        <ul class='submenu two_col'> <!-- submenu with two column -->
            <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><a href='#'>E-Commerce</a></li>
                <li><a href='#'>UI-UX-Design</a></li>
                <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><a href='#'>E-Commerce</a></li>
                <li><a href='#'>UI-UX-Design</a></li>
                <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><a href='#'>E-Commerce</a></li>
                <li><a href='#'>UI-UX-Design</a></li>
            </ul>
        </li>
    <li><a href='#'>Tutorial</a>
        <ul class='submenu img_container'> <!-- submenu with image container -->
            <li class='title'>Latest Tutorials</li>
              <li><img alt='image 1' src='img/image_1.png'/><p>Image Description</p></li>
              <li><img alt='image 1' src='img/image_1.png'/><p>Image Description</p></li>
              <li><img alt='image 1' src='img/image_1.png'/><p>Image Description</p></li>
              <li><img alt='image 1' src='img/image_1.png'/><p>Image Description</p></li>
            </ul>
        </li>
        <li><a href='#'>News</a>
        <ul class='submenu img_container half'> <!-- submenu with image container half in size + two column-->
            <li class='title'>Latest News</li>
              <li><img alt='image 1' src='img/image_1.png'/><p>Image Description</p></li>
              <li><img alt='image 1' src='img/image_1.png'/><p>Image Description</p></li>
              <li><img alt='image 1' src='img/image_1.png'/><p>Image Description</p></li>
              <li><img alt='image 1' src='img/image_1.png'/><p>Image Description</p></li>
           
            <div class='two_col'>
                <li class='title'>Category One</li>
                <li class='title'>Category Two</li>
               
                <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                </div>
                </ul>
        </li>
    <li><a href='#'>More</a>
        <ul class='submenu four_col'> <!-- submenu with four column -->
            <li class='title'>Category One</li>
                <li class='title'>Category Two</li>
                <li class='title'>Category Three</li>
                <li class='title'>Category Four</li>
               
                <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><a href='#'>E-Commerce</a></li>
                <li><a href='#'>UI-UX-Design</a></li>
                <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><a href='#'>E-Commerce</a></li>
                <li><a href='#'>UI-UX-Design</a></li>
                <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><a href='#'>E-Commerce</a></li>
                <li><a href='#'>UI-UX-Design</a></li>
                <li><a href='#'>PSD Design</a></li>
                <li><a href='#'>Wordpress</a></li>
                <li><a href='#'>Magento</a></li>
                <li><a href='#'>Joomla</a></li>
                <li><a href='#'>E-Commerce</a></li>
                <li><a href='#'>UI-UX-Design</a></li>
            </ul>
        </li>
    <li class='social_bar'><a href='#'>Follow us</a> <!-- social bar -->
        <ul>
            <li><i class='fa fa-twitter'/><a href='#'>Twitter</a></li>
                <li><i class='fa fa-rss'/><a href='#'>RSS</a></li>
                <li><i class='fa fa-facebook'/><a href='#'>Facebook</a></li>
                <li><i class='fa fa-pinterest'/><a href='#'>Pinterest</a></li>
                <li><i class='fa fa-google-plus'/><a href='#'>Google</a></li>
                <li><i class='fa fa-skype'/><a href='#'>Skype</a></li>
                <li><i class='fa fa-linkedin'/><a href='#'>Linkedin</a></li>
                <li><i class='fa fa-flickr'/><a href='#'>Flickr</a></li>
            </ul>
        </li>
    <li class='user_login'><i class='fa fa-user'/><a href='#'>Contact us</a> <!-- login bar form -->
        <ul>
            <form action='#' method='post'>
                <table>
                    <tr>
                        <td>Name</td>
                        </tr>
                        <tr>
                          <td><input name='user_name' type='text'/></td>
                        </tr>
                        <tr>
                        <td>Email</td>
                        </tr>
                        <tr>
                          <td><input name='email_address' type='text'/></td>
                        </tr>
                        <tr>
                          <td><input type='submit' value='Submit'/></td>
                        </tr>
                    </table>
                </form>
            </ul>
        </li>
        <li class='search_bar'><i class='fa fa-search'/> <!-- search bar -->
        <ul>
            <form action='#' method='post'>
                  <input name='search_input' placeholder='Type Keyword here' type='text'/>
                  <input type='submit' value='Search'/>
                </form>
            </ul>
        </li>
  </ul></input>
   </div>
<!-- mega menu end -->