Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

9 Style Mega Menu Drop Down Blogger

Mega Menu Drop Down Blogger 9 Style Mega Menu Drop Down Blogger – jika di artikel sebelumnya mengenai Mega Menu Drop Down pada tutorial tersebut hanya menggunakan CSS dan mungkin masih banyak kekurangan pada tutorial tersebut, maka pada pembahasan kali ini Mega Menu Drop Down akan terdapat 9 style full color dan dengan sedikit tambahan script jQuery sehingga akan memberikan efek pada menu agar bisa tampil dengan hasil maksimal untuk melengkapi desain blog. Dibawah saya sertakan pula demo dari masing-masing Mega Menu Drop Down untuk melihat lebih jelasnya dan agar bisa memilih langsung yang sesuai apabila ingin memasang ke blog anda. Pada Mega Menu Drop Down memang akan terdapat banyak link didalamnya dan bisa dengan leluasa untuk menambahkan link-link pada menu ini. untuk langkah penerapannya ke blog, berikut adalah 9 Style Mega Menu Drop Down Blogger yang dapat di pilih untuk di pasang ke blog dan cara memasangnya.

1. Login ke akun blogger.
2. Kemudian klik Template pilih Edit HTML.
3. Copy kode CSS berikut ini, lalu pasang diatas kode ]]></b:skin> (saya anggap ini untuk pengguna template lama / yang belum valid CSS3, dan untuk yang sudah valid CSS3 saya yakin pasti sudah tahu letak menaruh kodenya).
.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;}  #mega-menu-1 { font: normal 13px Arial, sans-serif; list-style: none; position: relative; padding: 0; margin: 0; } #mega-menu-1 .sub ul { display: block; } #mega-menu-1 { background: #222; width: 100%; height: 40px; position: relative; } #mega-menu-1 li { float: left; margin: 0; padding: 0; font-weight: bold; } #mega-menu-1 li a { float: left; display: block; color: #fff; padding: 12px 25px; background: #222; text-decoration: none; } #mega-menu-1 li.mega-hover a, #mega-menu-1 li a:hover { background: #CCC; color: #000; } #mega-menu-1 li .sub-container { position: absolute; } #mega-menu-1 li .sub { background: #efefef; padding: 15px; border: 1px solid #ccc; } #mega-menu-1 li .sub .row { width: 100%; overflow: hidden; clear: both; } #mega-menu-1 li .sub li { list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal; } #mega-menu-1 li .sub li.mega-hdr { margin: 0 10px 10px 0; float: left; } #mega-menu-1 li .sub li.mega-hdr.last { margin-right: 0; } #mega-menu-1 li .sub a { background: none; color: #111; padding: 7px 10px; display: block; float: none; font-size: 0.9em; } #mega-menu-1 li .sub li.mega-hdr a.mega-hdr-a { padding: 5px 15px; margin-bottom: 5px; background: #6B6B6B; text-transform: uppercase; font-weight: bold; color: #fff; } #mega-menu-1 li .sub li.mega-hdr a.mega-hdr-a:hover { color: #000; } #mega-menu-1 .sub li.mega-hdr li a { padding: 4px 5px; font-weight: normal; } #mega-menu-1 .sub li.mega-hdr li a:hover { color: #a32403; background: #efefef; } #mega-menu-1 .sub ul li { padding-right: 0; } #mega-menu-1 li .sub-container.non-mega .sub { padding: 10px; } #mega-menu-1 li .sub-container.non-mega li { padding: 0; width: 190px; margin: 0; } #mega-menu-1 li .sub-container.non-mega li a { padding: 7px 5px 7px 22px; } #mega-menu-1 li .sub-container.non-mega li a:hover { color: #a32403; background: #efefef; }
4. Selanjutnya pasang script jQuery berikut ini diatas kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-1').dcMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>
5. Langkah terakhir pasang markup HTML berikut ini didalam tag <body> atau bisa juga langsung kedalam widget seperti biasa, klik Tata Letak >> Tambah Widget >> HTML/Javascript paste kode disitu lalu Simpan.
<ul id="mega-menu-1" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
Keterangan:
Ganti “http://mas-andes.blogspot.com” dengan URL yang di inginkan.

Dibawah ini masih terdapat 8 Style Mega Menu Drop Down, untuk langkah penerapannya sama seperti cara diatas.

1. Black Style

CSS:
.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .black {font: normal 13px Arial, sans-serif; line-height: 16px;} .black ul.mega-menu, .black ul.mega-menu, .black ul.mega-menu li {margin: 0; padding: 0; border: none;} .black ul.mega-menu {background: #222 url(https://lh6.googleusercontent.com/-Ybm2eRsJxPE/Uf8EbCgCNCI/AAAAAAAAF6k/HBERdy8Usmw/h120/bg_black.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #1B1B1B; border-left: 1px solid #1B1B1B; position: relative;} .black ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .black ul.mega-menu li a {float: left; display: block; color: #fff; padding: 12px 38px 12px 25px; background: url(https://lh6.googleusercontent.com/-Ybm2eRsJxPE/Uf8EbCgCNCI/AAAAAAAAF6k/HBERdy8Usmw/h120/bg_black.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;} .black ul.mega-menu li a.dc-mega {position: relative;} .black ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(https://lh5.googleusercontent.com/-4qspDy23iXM/Uf8Eaoa3wpI/AAAAAAAAF6Q/ECMQoPQ1lTc/h120/arrow.png) no-repeat 0 0;} .black ul.mega-menu li.mega-hover a, .black ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .black ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .black ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #333; border-radius: 0 0 5px 5px;} .black ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .black ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .black ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .black ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .black ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .black ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .black ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .black ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #6B6B6B url(https://lh3.googleusercontent.com/-cw3BSA5M1Bc/Uf8Ec15ELgI/AAAAAAAAF7M/TqMYSvrDWrA/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;} .black ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #000; text-shadow: none;} .black ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .black ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 5px 8px;} .black ul.mega-menu .sub ul li {padding-right: 0;} .black ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .black ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .black ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 7px 10px;} .black ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 7px 10px;}
jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-2').dcMegaMenu({
        rowItems: '1',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>
HTML:
<div class="black">
<ul id="mega-menu-2" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

2. White Style

CSS:
.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .white {font: normal 13px Arial, sans-serif; line-height: 16px;} .white ul.mega-menu, .white ul.mega-menu, .white ul.mega-menu li {margin: 0; padding: 0; border: none;} .white ul.mega-menu {background: #ccc url(https://lh4.googleusercontent.com/-RrdikOtstfk/Uf8EeZIPupI/AAAAAAAAF8A/c6SvlSmjB1A/h120/bg_white.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; position: relative;} .white ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .white ul.mega-menu li a {float: left; display: block; color: #000; padding: 12px 38px 12px 25px; background: url(https://lh4.googleusercontent.com/-RrdikOtstfk/Uf8EeZIPupI/AAAAAAAAF8A/c6SvlSmjB1A/h120/bg_white.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #fff; text-decoration: none;} .white ul.mega-menu li a.dc-mega {position: relative;} .white ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; width: 8px; height: 6px;  top: 18px; right: 15px; background: url(https://lh5.googleusercontent.com/-4qspDy23iXM/Uf8Eaoa3wpI/AAAAAAAAF6Q/ECMQoPQ1lTc/h120/arrow.png) no-repeat 0 100%;} .white ul.mega-menu li.mega-hover a, .white ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .white ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .white ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #e7e7e7; border-radius: 0 0 5px 5px;} .white ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .white ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .white ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .white ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .white ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .white ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .white ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .white ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #E3E3E3 url(https://lh3.googleusercontent.com/-cw3BSA5M1Bc/Uf8Ec15ELgI/AAAAAAAAF7M/TqMYSvrDWrA/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #000; text-shadow: 1px 1px 1px #fff;} .white ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #a32403; text-shadow: none;} .white ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .white ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 5px 8px;} .white ul.mega-menu .sub ul li {padding-right: 0;} .white ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .white ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .white ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 7px 10px;} .white ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 7px 10px;}
jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-9').dcMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>
HTML:
<div class="white">
<ul id="mega-menu-9" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

3. Blue Style

CSS:
.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .blue {font: normal 13px Arial, sans-serif; line-height: 16px;} .blue ul.mega-menu, .blue ul.mega-menu, .blue ul.mega-menu li {margin: 0; padding: 0; border: none;} .blue ul.mega-menu{background: #8998a8 url(https://lh3.googleusercontent.com/-nZR15I7yNlg/Uf8EbXiKyQI/AAAAAAAAF6o/ImB80W0qDyo/h120/bg_blue.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #536573; border-left: 1px solid #536573; position: relative;} .blue ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .blue ul.mega-menu li a {float: left; display: block; color: #fff; padding: 12px 38px 12px 25px; background: url(https://lh3.googleusercontent.com/-nZR15I7yNlg/Uf8EbXiKyQI/AAAAAAAAF6o/ImB80W0qDyo/h120/bg_blue.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;} .blue ul.mega-menu li a.dc-mega {position: relative;} .blue ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(https://lh5.googleusercontent.com/-4qspDy23iXM/Uf8Eaoa3wpI/AAAAAAAAF6Q/ECMQoPQ1lTc/h120/arrow.png) no-repeat 0 0;} .blue ul.mega-menu li.mega-hover a, .blue ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .blue ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .blue ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #2a4366; border-radius: 0 0 5px 5px;} .blue ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .blue ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .blue ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .blue ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .blue ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .blue ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .blue ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .blue ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #304B73 url(https://lh3.googleusercontent.com/-cw3BSA5M1Bc/Uf8Ec15ELgI/AAAAAAAAF7M/TqMYSvrDWrA/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;} .blue ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #A8B7CF; text-shadow: none;} .blue ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .blue ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 5px 8px;} .blue ul.mega-menu .sub ul li {padding-right: 0;} .blue ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .blue ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .blue ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 7px 10px;} .blue ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 7px 10px;}
jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-4').dcMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>
HTML:
<div class="blue">
<ul id="mega-menu-4" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

4. Green Style

CSS:
.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .green {font: normal 13px Arial, sans-serif; line-height: 16px;} .green ul.mega-menu, .green ul.mega-menu, .green ul.mega-menu li {margin: 0; padding: 0; border: none;} .green ul.mega-menu {background: #222 url(https://lh6.googleusercontent.com/-g8dvdVV7gOM/Uf8Ebr6UsvI/AAAAAAAAF60/dpXRYwJzmng/h120/bg_green.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #94cd0b; border-left: 1px solid #94cd0b; position: relative;} .green ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .green ul.mega-menu li a {float: left; display: block; color: #000; padding: 12px 38px 12px 25px; background: url(https://lh6.googleusercontent.com/-g8dvdVV7gOM/Uf8Ebr6UsvI/AAAAAAAAF60/dpXRYwJzmng/h120/bg_green.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #fff; text-decoration: none;} .green ul.mega-menu li a.dc-mega {position: relative;} .green ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; width: 8px; height: 6px;  top: 18px; right: 15px; background: url(https://lh5.googleusercontent.com/-4qspDy23iXM/Uf8Eaoa3wpI/AAAAAAAAF6Q/ECMQoPQ1lTc/h120/arrow.png) no-repeat 0 100%;} .green ul.mega-menu li.mega-hover a, .green ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .green ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .green ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #9ac119; border-radius: 0 0 5px 5px;} .green ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .green ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .green ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .green ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .green ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .green ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .green ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .green ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #A1C81E url(https://lh3.googleusercontent.com/-cw3BSA5M1Bc/Uf8Ec15ELgI/AAAAAAAAF7M/TqMYSvrDWrA/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #000; text-shadow: 1px 1px 1px #fff;} .green ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #fff; text-shadow: none;} .green ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .green ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 5px 8px;} .green ul.mega-menu .sub ul li {padding-right: 0;} .green ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .green ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .green ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 7px 10px;} .green ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 7px 10px;}
jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-7').dcMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'slide'
    });
});
</script>
HTML:
<div class="green">
<ul id="mega-menu-7" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

5. Grey Style

CSS:
.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .grey {font: normal 13px Arial, sans-serif; line-height: 16px;} .grey ul.mega-menu, .grey ul.mega-menu, .grey ul.mega-menu li {margin: 0; padding: 0; border: none;} .grey ul.mega-menu {background: #8998a8 url(https://lh5.googleusercontent.com/-1Pqs-7d7Lck/Uf8EcOlV7UI/AAAAAAAAF64/OxJJwsE0ZgQ/h120/bg_grey.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #8B949F; border-left: 1px solid #8B949F; position: relative;} .grey ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .grey ul.mega-menu li a {float: left; display: block; color: #fff; padding: 12px 38px 12px 25px; background: url(https://lh5.googleusercontent.com/-1Pqs-7d7Lck/Uf8EcOlV7UI/AAAAAAAAF64/OxJJwsE0ZgQ/h120/bg_grey.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;} .grey ul.mega-menu li a.dc-mega {position: relative;} .grey ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(https://lh5.googleusercontent.com/-4qspDy23iXM/Uf8Eaoa3wpI/AAAAAAAAF6Q/ECMQoPQ1lTc/h120/arrow.png) no-repeat 0 0;} .grey ul.mega-menu li.mega-hover a, .grey ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .grey ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .grey ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #8696a7; border-radius: 0 0 5px 5px;} .grey ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .grey ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .grey ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .grey ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .grey ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .grey ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .grey ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .grey ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #8A98A9 url(https://lh3.googleusercontent.com/-cw3BSA5M1Bc/Uf8Ec15ELgI/AAAAAAAAF7M/TqMYSvrDWrA/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;} .grey ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #000; text-shadow: none;} .grey ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .grey ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 5px 8px;} .grey ul.mega-menu .sub ul li {padding-right: 0;} .grey ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .grey ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .grey ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 7px 10px;} .grey ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 7px 10px;}
jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-3').dcMegaMenu({
        rowItems: '2',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>
HTML:
<div class="grey">
<ul id="mega-menu-3" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

6. Light Blue Style

CSS:
.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .light-blue {font: normal 13px Arial, sans-serif; line-height: 16px;} .light-blue ul.mega-menu, .light-blue ul.mega-menu, .light-blue ul.mega-menu li {margin: 0; padding: 0; border: none;} .light-blue ul.mega-menu {background: #222 url(https://lh6.googleusercontent.com/-1Ax7mzo59vc/Uf8EcdHtGVI/AAAAAAAAF7I/hyk0nP3lh4Q/h120/bg_light_blue.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #44B3FF; border-left: 1px solid #44B3FF; position: relative;} .light-blue ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .light-blue ul.mega-menu li a {float: left; display: block; color: #000; padding: 12px 38px 12px 25px; background: url(https://lh6.googleusercontent.com/-1Ax7mzo59vc/Uf8EcdHtGVI/AAAAAAAAF7I/hyk0nP3lh4Q/h120/bg_light_blue.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #fff; text-decoration: none;} .light-blue ul.mega-menu li a.dc-mega {position: relative;} .light-blue ul.mega-menu li a .dc-mega-icon {display: block; position: absolute;  top: 18px; right: 15px; width: 8px; height: 6px; background: url(https://lh5.googleusercontent.com/-4qspDy23iXM/Uf8Eaoa3wpI/AAAAAAAAF6Q/ECMQoPQ1lTc/h120/arrow.png) no-repeat 0 100%;} .light-blue ul.mega-menu li.mega-hover a, .light-blue ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .light-blue ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .light-blue ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #2aafe5; border-radius: 0 0 5px 5px;} .light-blue ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .light-blue ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .light-blue ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .light-blue ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .light-blue ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .light-blue ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .light-blue ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .light-blue ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #4EC3F3 url(https://lh3.googleusercontent.com/-cw3BSA5M1Bc/Uf8Ec15ELgI/AAAAAAAAF7M/TqMYSvrDWrA/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #000; text-shadow: 1px 1px 1px #fff;} .light-blue ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #fff; text-shadow: none;} .light-blue ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .light-blue ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 5px 8px;} .light-blue ul.mega-menu .sub ul li {padding-right: 0;} .light-blue ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .light-blue ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .light-blue ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 7px 10px;} .light-blue ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 7px 10px;}
jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-8').dcMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>
HTML:
<div class="light-blue">
<ul id="mega-menu-8" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

7. Orange Style

CSS:
.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .orange{font: normal 13px Arial, sans-serif; line-height: 16px;} .orange ul.mega-menu, .orange ul.mega-menu, .orange ul.mega-menu li {margin: 0; padding: 0; border: none;} .orange ul.mega-menu {background: #8998a8 url(https://lh4.googleusercontent.com/-GHGuXolCWzU/Uf8EdQE_wuI/AAAAAAAAF7k/0x2UCaPjcvo/h120/bg_orange.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #bd3e00; border-left: 1px solid #bd3e00; position: relative;} .orange ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .orange ul.mega-menu li a {float: left; display: block; color: #fff; padding: 12px 38px 12px 25px; background: url(https://lh4.googleusercontent.com/-GHGuXolCWzU/Uf8EdQE_wuI/AAAAAAAAF7k/0x2UCaPjcvo/h120/bg_orange.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;} .orange ul.mega-menu li a.dc-mega {position: relative;} .orange ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(https://lh5.googleusercontent.com/-4qspDy23iXM/Uf8Eaoa3wpI/AAAAAAAAF6Q/ECMQoPQ1lTc/h120/arrow.png) no-repeat 0 0;} .orange ul.mega-menu li.mega-hover a, .orange ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .orange ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .orange ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #e75921; border-radius: 0 0 5px 5px;} .orange ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .orange ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .orange ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .orange ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .orange ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .orange ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .orange ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .orange ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #E75921 url(https://lh3.googleusercontent.com/-cw3BSA5M1Bc/Uf8Ec15ELgI/AAAAAAAAF7M/TqMYSvrDWrA/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;} .orange ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #000; text-shadow: none;} .orange ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .orange ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 5px 8px;} .orange ul.mega-menu .sub ul li {padding-right: 0;} .orange ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .orange ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .orange ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 7px 10px;} .orange ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 7px 10px;}
jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-5').dcMegaMenu({
        rowItems: '4',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>
HTML:
<div class="orange">
<ul id="mega-menu-5" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

8. Red Style

CSS:
.mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .red {font: normal 13px Arial, sans-serif; line-height: 16px;} .red ul.mega-menu, .red ul.mega-menu, .red ul.mega-menu li {margin: 0; padding: 0; border: none;} .red ul.mega-menu {background: #8998a8 url(https://lh5.googleusercontent.com/-40_aCZhuUlg/Uf8EdzACNTI/AAAAAAAAF7s/SH3wNWFxxxk/h120/bg_red.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #E41E1F; border-left: 1px solid #E41E1F; position: relative;} .red ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;} .red ul.mega-menu li a {float: left; display: block; color: #fff; padding: 12px 38px 12px 25px; background: url(https://lh5.googleusercontent.com/-40_aCZhuUlg/Uf8EdzACNTI/AAAAAAAAF7s/SH3wNWFxxxk/h120/bg_red.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;} .red ul.mega-menu li a.dc-mega {position: relative;} .red ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(https://lh5.googleusercontent.com/-4qspDy23iXM/Uf8Eaoa3wpI/AAAAAAAAF6Q/ECMQoPQ1lTc/h120/arrow.png) no-repeat 0 0;} .red ul.mega-menu li.mega-hover a, .red ul.mega-menu li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;} .red ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;} .red ul.mega-menu li .sub-container {position: absolute; background: #fff; padding-left: 20px; margin-left: -3px; box-shadow: 1px 1px 5px #ca212a; border-radius: 0 0 5px 5px;} .red ul.mega-menu li .sub {padding: 20px 20px 20px 10px;} .red ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;} .red ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .red ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal;} .red ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;} .red ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;} .red ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .red ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #DB323A url(https://lh3.googleusercontent.com/-cw3BSA5M1Bc/Uf8Ec15ELgI/AAAAAAAAF7M/TqMYSvrDWrA/h27/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;} .red ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #000; text-shadow: none;} .red ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 5px 8px; font-weight: normal;} .red ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 5px 8px;} .red ul.mega-menu .sub ul li {padding-right: 0;} .red ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;} .red ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;} .red ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(https://lh6.googleusercontent.com/-FZBLhkFFOrY/Uf8Ea2kL2kI/AAAAAAAAF6c/Z7q8wwb6lhc/h120/arrow_off.png) no-repeat 7px 10px;} .red ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(https://lh4.googleusercontent.com/-sntE_IOckSw/Uf8Eai3i9_I/AAAAAAAAF6U/vESjnh8t1Ss/h120/arrow_on.png) no-repeat 7px 10px;}
jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-6').dcMegaMenu({
        rowItems: '3',
        speed: 'slow',
        effect: 'slide'
    });
});
</script>
HTML:
<div class="red">
<ul id="mega-menu-6" class="mega-menu">
    <li><a href="http://mas-andes.blogspot.com">Home</a></li>
    <li><a href="http://mas-andes.blogspot.com">Menu 1</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 8</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 4</a>
                <ul>
                    <li><a href="http://mas-andes.blogspot.com">Link 14</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 15</a></li>
                </ul>
            </li>
            <li><a href="http://mas-andes.blogspot.com">Judul 5</a>
              <ul>
                <li><a href="http://mas-andes.blogspot.com">Link 16</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 17</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 18</a></li>
                    <li><a href="http://mas-andes.blogspot.com">Link 19</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Menu 2</a>
        <ul>
            <li><a href="http://mas-andes.blogspot.com">Judul 1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
    </li>
    <li><a href="http://mas-andes.blogspot.com">Judul 2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 7</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul 3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 9</a></li>

    </ul>
</li>
    <li class="menu-item-129"><a href="http://mas-andes.blogspot.com">Judul 4</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 10</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 11</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 12</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 13</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 3</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
    <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>

</ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Menu 4</a>
<ul>
    <li><a href="http://mas-andes.blogspot.com">Judul  1</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 1</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 2</a></li>
    </ul>
</li>
<li><a href="http://mas-andes.blogspot.com">Judul  2</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 3</a></li>
    </ul>
</li>
    <li><a href="http://mas-andes.blogspot.com">Judul  3</a>
    <ul>
        <li><a href="http://mas-andes.blogspot.com">Link 4</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 5</a></li>
        <li><a href="http://mas-andes.blogspot.com">Link 6</a></li>
    </ul>
</li>
</ul>
</li>
</ul>
</div>

Tidak semua template blog sama persis, jadi apabila kurang sesuai dalam menaruh markup HTML bisa disesuaikan sendiri dengan menu di blog yang sudah ada sebelumnya.

Berlangganan artikel via email

52 Response to "9 Style Mega Menu Drop Down Blogger"

lumayan keren keren mas, cocok banget untuk web yang menunya banyak, jadi terlihat ringkas...

Balas
avatar
Anonymous

Gile... gede2 emang sesuai namanya mega menu,

Balas
avatar
Anonymous

bagus semua tuh bang heheh..susah pilih yg mana yg bagus :D
nice dahh

Balas

Semuanya memang sangat bagus,dan sudah kupasang ...
terima kasih sudah berbagi

Balas

setuju dengan argumen mas agus..)

Balas

Sory banget kawan saya baru bisa hadir lagi disini,maklum di DUMAI lagi suibuk hehe
BTW ada tutor baru lagi nih bro,,,mantappppp

Balas

aku juga setuju tuh,,jadi ringkas ringan gratis lagi hahaha

Balas
avatar
Anonymous

pilih-pilih dulu nih. ^_^

Balas
avatar
Anonymous

wah hebat dipasang semuanya. ^_^

Balas
avatar
Anonymous

Keren banget sob, susah pilih yang mana semua bagus kok, jadi pusing nie

Balas

Keren mas. Ada yg support sama responsive ndak? Saya butuh nih...hehehe

Balas
avatar
Anonymous

keren yang pertama sob . blognya juga keren
back yah

Balas

Saya paling suka yang warna orange mas..

Balas

Gema Takbir Menyapa Semesta,
Membesarkan dan Mengagungkan Yang Maha Esa nan Maha Suci,
Bersihkan Hati Kembali Fitri di Hari Kemenangan,
Terkadang Mata Salah Melihat dan Mulut Salah Berucap,
Hati kadang salah menduga serta Sikap Khilaf dalam Berprilaku,
Bila Ada Salah Kata, Khilaf Perbuatan dan Sikap,
Bila Ada Salah Baca dan Salah Komentar,
Mohon Dimaafkan Lahir dan Batin,
Selamat Idul Fitri 1 Syawal 1434 H

Balas
avatar
Anonymous

wah keren banget nih mas Andes, baru tahu saya menu drop down model gini, kapan-kapan saya coba ah...

Balas

Ramadhan membasuh hati yang berjelaga,
Saatnya meraih rahmat dan ampunanNya
Untuk lisan dan sikap yang takterjaga
Mohon dibukakan pintu ma’af yang sebesar-
Besarnya.
Selamat Harri Raya Idul Fitri 1 Syawwal 1434 H
Minal Aidin Wal Faidzin,,,,,,,,,,,,,,,,,,,,,,,,,,,

Balas

Mantep mas andes..selamat hari raya idul fitri mohon maaf lahir dan bathin

Balas

saya kurang setuju....
bukan lumayan maksud nya
tapi emang keren dong :)

Balas

saya lebih condong suka yang blue style mas :)

Balas

saya pun demikian ya mas Andes
selamat hari raya idul fitri 1 syawal H
mohon mav lahir n bathin :)

Balas

kok nunggu kapan2 mas
kburu bayar loh...hehe

Balas

saya pilih yang terakhir aja,,, :)

Balas
avatar
Anonymous

Selamat hari raya idul fitri.
Mohon maaf lahir dan batin. ^_^

Balas

taqoballahuminna waminkum,,, taqobal yaakarim,,,
minal aizdin walfa'izdin ,,,,
mohon maaf lahir dan batin


gimana lebarannya mas andes?

Balas
avatar
Anonymous

Sepertinya asik nih di pasang di belog ku.. Dan sekalian mau ngucapin selamat hari lebaran, mohon maaf lahir batin

Balas

sebelum mengomentari karyanya
izinkan saya Ruly dan keluarga mengucapkan minal aidzin walfaidzin
mohon maaf lahir dan bathin ...
Mantap mas keren ...... sulit diungkapkan dgn kata-kata

Balas

Dalam kerendahan hati ada ketinggian budi,
Dalam kemiskinan harta,ada kekayaan jiwa.
Kehidupan ini akan terasa indah bila ada ma’af
Taqobqlqllohu minna wa minkum
Syiamana wa syiamakum

Balas

ini kunjungan perdana saya,
semoga bisa menjalin silaturahmi,
selamat idul fitri 1434 H :-)

Balas

postinganx agak berat mas.., tp keren lah! makasih ya.. :)

maaf lahir batin
“ฦฌฮฑqobbฮฑlฮฑllฮฑhu minnฮฑฮฑ ฯ‰ฮฑ minkum
(Semogฮฑ Alloh menerimฮฑ ฮฑmฮฑlku dฮฑn ฮฑmฮฑl kฮฑliฮฑn).”

Balas

Bagus banget mas menu nya ??
mohon maaf lahir batin ya mas.... :)

Balas

keren2 mas, aarin ngubah warna tempalte blog dong

oh ya
Mohon ma’af lahir dan batin ya mas

Balas

nggak mungkin bayar mas, mas Andes kan super baik hati hoho....

Balas
avatar
Anonymous

Mas Andes maafin yah kalau ada salah-salah kata :)

Minal Aidin Wal Faidzin
Mohon Maaf Lahir Dan Batin
Selamat Hari Raya Idul Fitri 1 Syawal 1434 H

Balas
avatar
Anonymous

Jiahhh keren sekali... tapi kyknya mumet juga kalo sy buat yg beginian... oh ya, Mohon Maaf Lahir dan Batin .. Met Idul Fitri 1434 H ya Mas Andes...

Balas
avatar
Anonymous

wuihhh kereen keren mas.. izin follow mas,follow back yah?? salam kenal..

Balas

nyimak aja mas sekalian mau ngucapin
selamat idul fitri 1434H mohon maaf lahir&bathin :)

Balas
avatar
Anonymous

Keren sekali gan menu drop downnya, kapan2 ane coba salah satu yang ada di blog ini. oia mohon maaf yaa gan :)

Balas

wow banyak banget menu nya, keren" mas, izin copas kodenya dlu mas, terima kasih

Balas

Terima kasih atas infonya gan

Balas

waw.... keren... ane suka tuh nyang warna biru

Balas

Salam Mas Andes - http://mas-andes.blogspot.com
Jangan bosan saya mampir selalu di blog Mas Andes
Yang Identik dengan corak color black - green clorofil
yang berartikan Blog sejuk dan rindang sedap di pandang
Mata semua pengunjung.. sangat jeli Mas Andes memodivikasi templte

Style mega menu, postingan Mas Andes sudah berhasil saya coba
namun belum selesai semu baru satu kolom, tapi gak tau bener apa salah yah
Mas saya nerapin di menu atas saya,.? kalau Mas..ada wakyu cek di
http://karristaent.blogspot.com Mohon Bimbingan yah Mas..?

Trima kasih atas ilmu dan berbagi nya Mas Andes...

Balas

Oh maaf Mas Andes makasud nya Style mega menu gak sepenuh nya saya ambil
Cuma saya ambil di bagian drop down nya saja begitu..lengkap maksud koment
saya di atas...:h :h :h
Krena sebelum ada postingan Mas Andes ini saya agak kebingungan pengen
mengisi link posts saya pada menu atas drop down di blog saya
tapi sudah saya pasang script drop down dan saya isi dengan link post blog saya
Tapi benar salah nya gak tau tapi mudah2 an bener sih makasih Mas..?
Salam sukses .

Balas

oh tidak apa2 kang Karrysta, saya persilahkan jika ada yang dibutuhkan ambil saja. disini saya sifatnya berbagi, saya blogging juga belajar dan mencari ilmu. apa yang saya bisa akan saya bagikan biar bisa buat belajar bersama, dan yang saya belum bisa akan saya cari buat saya pelajari.
saran saya link2 yang terdapat pada menu dirubah saja kang menggunakan link label, begitu lebih efisien dan tidak terlalu ribet untuk memasukan link per artikel post satu per satu

Balas
avatar
Anonymous

Wuihh yang ini lebih Mantap Mas,. Andes...?
Keren Pool izin simak lagi Massss
Sukses terus yah Mas ?

Balas

ko gak kluar sih yng drodown.nya mas

Balas

koneksinya masih kurang baik mungkin mas, itu di atas lancar2 aja

Balas

ijin copy kang andes

Balas

Salam kenal kang, andes, saya baru mencoba menggunakan Headline breaking news dari blog ini, mau tanya ni.. kenapa hanya loading ... apa krn artikel baru belum ada? tanya no.2: apa boleh tau kode utk mmbuat menu sepert di blog demo??? trims. kunjung balik mas ke gustihadinata.com

Balas

kang, ana udah lama pake drop down menu di atas, tampilannya bagus cocok buat yang artikelnya banyak, tapi sekarang berubah jadi acak-acakan kaya di atas, ana udah coba ganti2 template, eh masih gitu2 juga, akhirnya ana ganti tuh menunya. ana gak tau apa penyebabnya jadi berubah.

Balas

penyebabnya ada di kode ini mas.
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>

script yang saya simpan di googlecode sudah dihapus oleh pihak google karena googlecode sudash tidak menyediakan layanan hosting gratis. dan semua script yang saya simpan disana tidak saya backup. nanti kalo ada waktu luang saya perbaiki artikel ini.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "9 Style Mega Menu Drop Down Blogger" ini bermanfaat, share ke jejaring sosial.
Konversi Kode