9 Style Mega Menu Drop Down Blogger ~ MAS ARIE69

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xe0yit324CQCEIp6rEGx9vExu5TX2cby_-tZyIGzZtuod6tpF-IWbwM41eWvhmqVlgyOjgDS6njTArTTbFCFVWoAEO2mSEdskwhtNAEKMmTrh2Yt-QBCP7hhba6IDbJaZchnhVkeZx0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xe0yit324CQCEIp6rEGx9vExu5TX2cby_-tZyIGzZtuod6tpF-IWbwM41eWvhmqVlgyOjgDS6njTArTTbFCFVWoAEO2mSEdskwhtNAEKMmTrh2Yt-QBCP7hhba6IDbJaZchnhVkeZx0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis66yGWFBPE3KpLEmnqbfLZyZIDYe2TekjvBR5IGxWc_v5BMMChVN1NNQyv326wnvqCzqcCdTVGlcqIgRAN8hHe_2-kl0VQjFVnQSL-hXKjYu_V9FCmPen8OHjVJ3kTmah573B6jFUbHk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1ix9ljSZXmiBNJxjj0EBAjnOXyXsId1guE5mXMXQhSVHFEpsdJTpN82RXKTAUKZgtEDQRrRKMgVC84tN3PmyQP0OzQSwNF_pSdy6MAIP0hfqaESxYKY4HCb5KuqUnCiCFVe7ouTHU20/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdke3cDswq62-nIS-LtsQxZVM8GvtcNglMztpUb4qJYO2isxPZGpV-DzvcFUf92HY1xCHXnv8sJmvJ6OQWyi86Gq9siIWJvjI4a7ryi6zJOeimAOLZhS8fStLSY_2Qsrble_jvbbV3Js/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdke3cDswq62-nIS-LtsQxZVM8GvtcNglMztpUb4qJYO2isxPZGpV-DzvcFUf92HY1xCHXnv8sJmvJ6OQWyi86Gq9siIWJvjI4a7ryi6zJOeimAOLZhS8fStLSY_2Qsrble_jvbbV3Js/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis66yGWFBPE3KpLEmnqbfLZyZIDYe2TekjvBR5IGxWc_v5BMMChVN1NNQyv326wnvqCzqcCdTVGlcqIgRAN8hHe_2-kl0VQjFVnQSL-hXKjYu_V9FCmPen8OHjVJ3kTmah573B6jFUbHk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1ix9ljSZXmiBNJxjj0EBAjnOXyXsId1guE5mXMXQhSVHFEpsdJTpN82RXKTAUKZgtEDQRrRKMgVC84tN3PmyQP0OzQSwNF_pSdy6MAIP0hfqaESxYKY4HCb5KuqUnCiCFVe7ouTHU20/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6gu3Tzv1DlvTLItO3UE_1kJcjETsL_rtAw4l_p7y9r9i0sjFIpP1qAC34hyphenhyphenxYKAwS2UG7JnBIaLrN9XU7KksRZxeyjANZYSgMxFxtb4xWo7yhOmQA1eW48UW4CuDeMsmy_3ZEY2SGbs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6gu3Tzv1DlvTLItO3UE_1kJcjETsL_rtAw4l_p7y9r9i0sjFIpP1qAC34hyphenhyphenxYKAwS2UG7JnBIaLrN9XU7KksRZxeyjANZYSgMxFxtb4xWo7yhOmQA1eW48UW4CuDeMsmy_3ZEY2SGbs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis66yGWFBPE3KpLEmnqbfLZyZIDYe2TekjvBR5IGxWc_v5BMMChVN1NNQyv326wnvqCzqcCdTVGlcqIgRAN8hHe_2-kl0VQjFVnQSL-hXKjYu_V9FCmPen8OHjVJ3kTmah573B6jFUbHk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1ix9ljSZXmiBNJxjj0EBAjnOXyXsId1guE5mXMXQhSVHFEpsdJTpN82RXKTAUKZgtEDQRrRKMgVC84tN3PmyQP0OzQSwNF_pSdy6MAIP0hfqaESxYKY4HCb5KuqUnCiCFVe7ouTHU20/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijslaLPPN37EBW8gymV5bUZlmaBp80s45mA4TrsKnQ5PyFawMIu7HIEe-QnFWwhtTslbWCzLXUwjTK8DB83TPEyDn95C7jWYS8GPgIM4io-mk1FcgakXuPtJMWXSEKI-2zJHl16BWzD_k/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijslaLPPN37EBW8gymV5bUZlmaBp80s45mA4TrsKnQ5PyFawMIu7HIEe-QnFWwhtTslbWCzLXUwjTK8DB83TPEyDn95C7jWYS8GPgIM4io-mk1FcgakXuPtJMWXSEKI-2zJHl16BWzD_k/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis66yGWFBPE3KpLEmnqbfLZyZIDYe2TekjvBR5IGxWc_v5BMMChVN1NNQyv326wnvqCzqcCdTVGlcqIgRAN8hHe_2-kl0VQjFVnQSL-hXKjYu_V9FCmPen8OHjVJ3kTmah573B6jFUbHk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1ix9ljSZXmiBNJxjj0EBAjnOXyXsId1guE5mXMXQhSVHFEpsdJTpN82RXKTAUKZgtEDQRrRKMgVC84tN3PmyQP0OzQSwNF_pSdy6MAIP0hfqaESxYKY4HCb5KuqUnCiCFVe7ouTHU20/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi48qtd3lJn87IgU27iOKf5wLfcAk7vEi0kYADJiz4m5kMopPG5YnlnTHprFQvAVTvoIYxQcgj7rs5Aaz-vIOvTRqcS2EEE3Hdthz9UoH3lHX0RVbhyv3t4M4eMfyYMEj8EftQ6uePmUnY/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi48qtd3lJn87IgU27iOKf5wLfcAk7vEi0kYADJiz4m5kMopPG5YnlnTHprFQvAVTvoIYxQcgj7rs5Aaz-vIOvTRqcS2EEE3Hdthz9UoH3lHX0RVbhyv3t4M4eMfyYMEj8EftQ6uePmUnY/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis66yGWFBPE3KpLEmnqbfLZyZIDYe2TekjvBR5IGxWc_v5BMMChVN1NNQyv326wnvqCzqcCdTVGlcqIgRAN8hHe_2-kl0VQjFVnQSL-hXKjYu_V9FCmPen8OHjVJ3kTmah573B6jFUbHk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1ix9ljSZXmiBNJxjj0EBAjnOXyXsId1guE5mXMXQhSVHFEpsdJTpN82RXKTAUKZgtEDQRrRKMgVC84tN3PmyQP0OzQSwNF_pSdy6MAIP0hfqaESxYKY4HCb5KuqUnCiCFVe7ouTHU20/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9fVFfItxIC6t8EYDkpgwWBIn4us1ZzO3dgGXgC8L4x0Sv5CpYhD3pKVV6M-AAgPxZh_Ttsweol2zH3JSiqLKLETTcwsq8b7paPVqdJxwOYao7zMx-QIsIVrVDrGo8NCP4iBT63A2PZM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9fVFfItxIC6t8EYDkpgwWBIn4us1ZzO3dgGXgC8L4x0Sv5CpYhD3pKVV6M-AAgPxZh_Ttsweol2zH3JSiqLKLETTcwsq8b7paPVqdJxwOYao7zMx-QIsIVrVDrGo8NCP4iBT63A2PZM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis66yGWFBPE3KpLEmnqbfLZyZIDYe2TekjvBR5IGxWc_v5BMMChVN1NNQyv326wnvqCzqcCdTVGlcqIgRAN8hHe_2-kl0VQjFVnQSL-hXKjYu_V9FCmPen8OHjVJ3kTmah573B6jFUbHk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1ix9ljSZXmiBNJxjj0EBAjnOXyXsId1guE5mXMXQhSVHFEpsdJTpN82RXKTAUKZgtEDQRrRKMgVC84tN3PmyQP0OzQSwNF_pSdy6MAIP0hfqaESxYKY4HCb5KuqUnCiCFVe7ouTHU20/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZqTqxeMTPo18C5fOLGrdgfnXDYyiAshco0zd04Lr19-7a-44TuNSXN4zMwZ3b3-lAJ7MAtCg_WFBHyi81TS0UcJ3SR7fCBg_eavsGaraZiWPJ5BG9KCoT2MpJ6knowf7RU4lo-h3dvU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZqTqxeMTPo18C5fOLGrdgfnXDYyiAshco0zd04Lr19-7a-44TuNSXN4zMwZ3b3-lAJ7MAtCg_WFBHyi81TS0UcJ3SR7fCBg_eavsGaraZiWPJ5BG9KCoT2MpJ6knowf7RU4lo-h3dvU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis66yGWFBPE3KpLEmnqbfLZyZIDYe2TekjvBR5IGxWc_v5BMMChVN1NNQyv326wnvqCzqcCdTVGlcqIgRAN8hHe_2-kl0VQjFVnQSL-hXKjYu_V9FCmPen8OHjVJ3kTmah573B6jFUbHk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1ix9ljSZXmiBNJxjj0EBAjnOXyXsId1guE5mXMXQhSVHFEpsdJTpN82RXKTAUKZgtEDQRrRKMgVC84tN3PmyQP0OzQSwNF_pSdy6MAIP0hfqaESxYKY4HCb5KuqUnCiCFVe7ouTHU20/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9p_BnvrOZyMLsYvOdkoUGMRGe-5wHr-G0Wi6Wgw-my0Mh2DcD9_4zxu5rAuygTzodhc6Wle3gvz2yTHIizvOfiJFgGk2pcCiuoLIq4E8tvKEYRDUiPHt218RdhrqEgILHFHOUy1_gUP4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9p_BnvrOZyMLsYvOdkoUGMRGe-5wHr-G0Wi6Wgw-my0Mh2DcD9_4zxu5rAuygTzodhc6Wle3gvz2yTHIizvOfiJFgGk2pcCiuoLIq4E8tvKEYRDUiPHt218RdhrqEgILHFHOUy1_gUP4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis66yGWFBPE3KpLEmnqbfLZyZIDYe2TekjvBR5IGxWc_v5BMMChVN1NNQyv326wnvqCzqcCdTVGlcqIgRAN8hHe_2-kl0VQjFVnQSL-hXKjYu_V9FCmPen8OHjVJ3kTmah573B6jFUbHk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1ix9ljSZXmiBNJxjj0EBAjnOXyXsId1guE5mXMXQhSVHFEpsdJTpN82RXKTAUKZgtEDQRrRKMgVC84tN3PmyQP0OzQSwNF_pSdy6MAIP0hfqaESxYKY4HCb5KuqUnCiCFVe7ouTHU20/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqPMd8189lrQ4_EKor_v5SPhv74lMBb2V9tZb3XG6_8lSyNy8r5xp0z6YXzQR9Xt3BlMQyo6Jxgm2FihxGdlt0MFFgA4As68eEyIlyodzxRDO-Kw5GuJ-lsj52ICl-qsF2sIA8fo3JUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79fLo7mxN8LIEWDrdcnmo1luwMqelNwTRWO3I4Fg84svpP6ROm3GUi5Sd6O0r1H6eh_kO_Rs_dQWhK-JcnbK0YAt203OsrR78WxDvkiU8LZQ6vdkuuilCwOmAnIuCcGuGABTQ2wXk3K4/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.

MAS ARIE69

Tuesday, February 4, 2014

9 Style Mega Menu Drop Down Blogger

0 comments:

Post a Comment

Labels

Blog Archive

sponsor

comment

MAS ARIE69

Tuesday, February 4, 2014

9 Style Mega Menu Drop Down Blogger

0 comments:

Post a Comment

Social Profiles

Labels

Blog Archive

sponsor

comment