New Mega Drop Menus Pure HTML CSS / Blogger

Hello friends after a long time, i am back here again with an amazing another post, and its a whole new mega menus for advance websites framework.

MegaDrop is a Framework of basic CSS stlyes that help you achieve a mega dropdown navigation in a matter of minutes. All you have to do is make sure your HTML is structured correctly and you follow the class names.

Demo & Instructions
----
Original At :: https://github.com/jsheffers/MegaDrop

Here is HTML Code

<ul class="nav clearfix animated">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Products</a>
        <div class="container-4">
            <div class="col1">
                <h3>Vegetables</h3>
                <ul>
                    <li><a href="#">Tomatoes</a></li>
                    <li><a href="#">Squash</a></li>
                    <li><a href="#">Zucchini</a></li>
                    <li><a href="#">Cucumbers</a></li>
                    <li><a href="#">Green Beans</a></li>
                    <li><a href="#">Lima Beans</a></li>
                </ul>
            </div>
            <div class="col1">
                <h3>Fruits</h3>
                <ul>
                    <li><a href="#">Apples</a></li>
                    <li><a href="#">Blueberries</a></li>
                    <li><a href="#">Cranberries</a></li>
                    <li><a href="#">Raspberries</a></li>
                    <li><a href="#">Strawberries</a></li>
                </ul>
            </div>
            <div class="col2">
                <h3>Quality Guaranteed</h3>
                <p>We stand behind our products and guarantee you will get high quality products.</p>
            </div>
            <div class="col4 highlighted">
                <h3>SALE: Buy one get one FREE</h3>
                <p>All of our products are buy one get one free until April 1, 2013.</p>
            </div>
            <div class="col1">
                <h3>Vegetables</h3>
                <ul>
                    <li><a href="#">Tomatoes</a></li>
                    <li><a href="#">Squash</a></li>
                    <li><a href="#">Zucchini</a></li>
                    <li><a href="#">Cucumbers</a></li>
                    <li><a href="#">Green Beans</a></li>
                    <li><a href="#">Lima Beans</a></li>
                </ul>
            </div>
            <div class="col1">
                <h3>Fruits</h3>
                <ul>
                    <li><a href="#">Apples</a></li>
                    <li><a href="#">Blueberries</a></li>
                    <li><a href="#">Cranberries</a></li>
                    <li><a href="#">Raspberries</a></li>
                    <li><a href="#">Strawberries</a></li>
                </ul>
            </div>
            <div class="col2">
                <h3>Quality Guaranteed</h3>
                <p>We stand behind our products and guarantee you will get high quality products.</p>
            </div>
            <div class="col4 highlighted">
                <h3>SALE: Buy one get one FREE</h3>
                <p>All of our products are buy one get one free until April 1, 2013.</p>
            </div>
            <div class="col4">
                <h3>Quality Guaranteed</h3>
                <p>We stand behind our products and guarantee you will get high quality products.</p>
            </div>
        </div>  
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Donate</a></li>
    <li>
        <a href="#">About</a>
        <div class="container-1 right">
            <ul>
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">Why We Care</a></li>
                <li><a href="#">Some other page</a></li>
                <li><a href="#">How We Work</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#">Locations</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

2. JavaScript to be placed before </head>

<script>
$(function(){
    $('.animated > li').hover(function(){
        $(this).find('div[class^="container-"]').stop().slideDown('fast');
    },
    function(){
        $(this).find('div[class^="container-"]').stop().slideUp('slow');
    });
});</script>

 3. CSS the styling files to be placed before </head>

<style >.nav {
    background: #666;
    border-radius: 3px;
    width: 960px;
    margin: 20px auto;
    height: 43px;
}

.nav li { list-style: none;  }
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
    float: left;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    line-height: 43px;
    padding: 0 20px;
    border-right: 1px solid #777;
    border-left: 1px solid #555;
    height: 43px;
}
.nav > li:hover > a { background: #555;    border-right: 1px solid #666; }
.nav > li:first-child > a { border-left: 0; }
.nav > li:last-child > a { border-right: 0; }
.nav > li:hover > div { display: block; }

/* MEGA DROP DOWN */

.nav > li > div {
    position: absolute;
    left: 0;
    top: 43px;
    display: none;
    background: #fff;
    padding: 10px 10px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}
.nav > li > div p { color: #666; }
.nav > li > div.right { right: 0; left: auto }
.container-1, .container-2, .container-3, .container-4 { font-size: 80%; }


/* COLUMNS */
.col1,.col2,.col3,.col4,.col5 { margin: 10px 0; float: left; padding: 0 10px;}


    /* 1 Column */
    .container-1 { width: 170px; }
    .container-1 .col1 { width: 100%; }

    /* 2 Column */
    .container-2 { width: 270px; }
    .container-2 .col1 { width: 50% }
    .container-2 .col2 { width: 100% }

    /* 3 Column */
    .container-3 { width: 400px; }
    .container-3 .col1 { width: 33.33% }
    .container-3 .col2 { width: 66.66% }
    .container-3 .col3 { width: 100% }


    /* 4 Column */
    .container-4 { width: 500px; }
    .container-4 .col1 { width: 25%; }
    .container-4 .col2 { width: 50% }
    .container-4 .col3 { width: 75% }
    .container-4 .col4 { width: 100% }


    /* 5 Column */
    .container-5 { width: 600px; }
    .container-5 .col1 { width: 20%; }
    .container-5 .col2 { width: 40% }
    .container-5 .col3 { width: 60% }
    .container-5 .col4 { width: 80% }
    .container-5 .col5 { width: 100% }

/* HIGHLIGHTS */

.container-3 .highlighted {
    width: 400px;
    margin-left: -20px;
    padding: 20px;
    background: #e4fbff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.container-4 .highlighted {
    width: 500px;
    margin-left: -10px;
    padding: 20px;
    background: #e4fbff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}



.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}</style>