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>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.
<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>
<ul id="mega-menu-1" class="mega-menu">Keterangan:
<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>
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/AVvXsEghBQcWWVKBD1fq2GiqNUKEdIZCgy7bquF5Nv8SMHYyQVqgN8H-hw0BvdAhl4FW_JPGveSz35uf6QY846ToEcjSRZD7j-W6cOPvM20KznQf33YS_TGYq1yQjPM9W929_HQU9lyT7gBLG_k/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/AVvXsEghBQcWWVKBD1fq2GiqNUKEdIZCgy7bquF5Nv8SMHYyQVqgN8H-hw0BvdAhl4FW_JPGveSz35uf6QY846ToEcjSRZD7j-W6cOPvM20KznQf33YS_TGYq1yQjPM9W929_HQU9lyT7gBLG_k/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/AVvXsEjsnqvmdhCEupP655UqBQiV0b8sInEmLINeyKnb7KDXgl582m9s2IB1EklsuPPS8N_Rw3tYCDJ08uQfGKz75Ct1CYiIUgmz_bl8y0JdSQmTHSjOG4yo7gOKy5mVGftjvo0-DNGOEAVLjKA/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/AVvXsEi-xkMVflr4jWPQPHRm0EiNYF3CLD5jLau0bGJSXZrdA7n7kWoHQJ9jvjtsOb7igz12QrGnJj2e8f4FnaNCTGpJ3lW-KevD3XVLGDWcOqwdgCthT3dQ7QFjcoVr9uBsBFPI_kfFibzGay8/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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>HTML:
<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>
<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/AVvXsEhgqJJiRwuOQBzne8l6VZu9u7YGE-2sxcIXDpwaYnwyO1_ed0T_ZHJW0stLMEOb6O6gj3VFddC9XIwmn3M5uWR-qeEzXsPx177OWAeOdn_LHZylLLaCOt0E2fxeZ5tFkAiq51nYNBDxUhQ/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/AVvXsEhgqJJiRwuOQBzne8l6VZu9u7YGE-2sxcIXDpwaYnwyO1_ed0T_ZHJW0stLMEOb6O6gj3VFddC9XIwmn3M5uWR-qeEzXsPx177OWAeOdn_LHZylLLaCOt0E2fxeZ5tFkAiq51nYNBDxUhQ/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/AVvXsEjsnqvmdhCEupP655UqBQiV0b8sInEmLINeyKnb7KDXgl582m9s2IB1EklsuPPS8N_Rw3tYCDJ08uQfGKz75Ct1CYiIUgmz_bl8y0JdSQmTHSjOG4yo7gOKy5mVGftjvo0-DNGOEAVLjKA/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/AVvXsEi-xkMVflr4jWPQPHRm0EiNYF3CLD5jLau0bGJSXZrdA7n7kWoHQJ9jvjtsOb7igz12QrGnJj2e8f4FnaNCTGpJ3lW-KevD3XVLGDWcOqwdgCthT3dQ7QFjcoVr9uBsBFPI_kfFibzGay8/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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>HTML:
<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>
<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/AVvXsEhG4_5y2AlveYKIBU51Lz9v1Rc6pwW8tURJgQWx5rsttMNRaiGUa3reLDalwJGpQiX3qX0axSA6U6_-ANX4lKpwe1VptdGXB9zKFUcC-Lv1TWbSWJMtXMiCFaA6PEJ0AC4UpvNJTRj5fpQ/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/AVvXsEhG4_5y2AlveYKIBU51Lz9v1Rc6pwW8tURJgQWx5rsttMNRaiGUa3reLDalwJGpQiX3qX0axSA6U6_-ANX4lKpwe1VptdGXB9zKFUcC-Lv1TWbSWJMtXMiCFaA6PEJ0AC4UpvNJTRj5fpQ/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/AVvXsEjsnqvmdhCEupP655UqBQiV0b8sInEmLINeyKnb7KDXgl582m9s2IB1EklsuPPS8N_Rw3tYCDJ08uQfGKz75Ct1CYiIUgmz_bl8y0JdSQmTHSjOG4yo7gOKy5mVGftjvo0-DNGOEAVLjKA/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/AVvXsEi-xkMVflr4jWPQPHRm0EiNYF3CLD5jLau0bGJSXZrdA7n7kWoHQJ9jvjtsOb7igz12QrGnJj2e8f4FnaNCTGpJ3lW-KevD3XVLGDWcOqwdgCthT3dQ7QFjcoVr9uBsBFPI_kfFibzGay8/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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>HTML:
<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>
<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/AVvXsEjBevi5U3Ud_HWfrHEZjtDxspEnrEfNz2bbTHBUdrXoS-hb0Ey_5csdo2IXBpM1-hiD_J09jcsYdEGiOebd93N9oXRxlmUgd_nQQz5l_SP7agWYf1DdaZY63cBFOdRz_92DSHCVY8n80KA/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/AVvXsEjBevi5U3Ud_HWfrHEZjtDxspEnrEfNz2bbTHBUdrXoS-hb0Ey_5csdo2IXBpM1-hiD_J09jcsYdEGiOebd93N9oXRxlmUgd_nQQz5l_SP7agWYf1DdaZY63cBFOdRz_92DSHCVY8n80KA/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/AVvXsEjsnqvmdhCEupP655UqBQiV0b8sInEmLINeyKnb7KDXgl582m9s2IB1EklsuPPS8N_Rw3tYCDJ08uQfGKz75Ct1CYiIUgmz_bl8y0JdSQmTHSjOG4yo7gOKy5mVGftjvo0-DNGOEAVLjKA/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/AVvXsEi-xkMVflr4jWPQPHRm0EiNYF3CLD5jLau0bGJSXZrdA7n7kWoHQJ9jvjtsOb7igz12QrGnJj2e8f4FnaNCTGpJ3lW-KevD3XVLGDWcOqwdgCthT3dQ7QFjcoVr9uBsBFPI_kfFibzGay8/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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>HTML:
<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>
<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/AVvXsEghs6Uwn5OE4nvHNV0bR1Nz6n4-LPZQPLz0JS-ZhWhsQeIUJQj1snVlMyajGCPqtnUpGFVJN0bZgoiCf85lLeAvGuOXg6G2BIT7524nU99Ypu74niFw_n8GbtvyIjoRTFrGHjM2brxUwDA/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/AVvXsEghs6Uwn5OE4nvHNV0bR1Nz6n4-LPZQPLz0JS-ZhWhsQeIUJQj1snVlMyajGCPqtnUpGFVJN0bZgoiCf85lLeAvGuOXg6G2BIT7524nU99Ypu74niFw_n8GbtvyIjoRTFrGHjM2brxUwDA/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/AVvXsEjsnqvmdhCEupP655UqBQiV0b8sInEmLINeyKnb7KDXgl582m9s2IB1EklsuPPS8N_Rw3tYCDJ08uQfGKz75Ct1CYiIUgmz_bl8y0JdSQmTHSjOG4yo7gOKy5mVGftjvo0-DNGOEAVLjKA/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/AVvXsEi-xkMVflr4jWPQPHRm0EiNYF3CLD5jLau0bGJSXZrdA7n7kWoHQJ9jvjtsOb7igz12QrGnJj2e8f4FnaNCTGpJ3lW-KevD3XVLGDWcOqwdgCthT3dQ7QFjcoVr9uBsBFPI_kfFibzGay8/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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>HTML:
<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>
<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/AVvXsEikPS4yl0e2VT2r9PgCOqBd49Kw9U5gaasN5rdYNlTNoYXs3wXB9XC3_DS4GzWoq9qyTRCXjM0KXSdL9egHD8m-RXDwt0l-3qf-KO8WBhIhVvSkryT5sGHjqMNpign6aDGdjMgGkA_91kU/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/AVvXsEikPS4yl0e2VT2r9PgCOqBd49Kw9U5gaasN5rdYNlTNoYXs3wXB9XC3_DS4GzWoq9qyTRCXjM0KXSdL9egHD8m-RXDwt0l-3qf-KO8WBhIhVvSkryT5sGHjqMNpign6aDGdjMgGkA_91kU/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/AVvXsEjsnqvmdhCEupP655UqBQiV0b8sInEmLINeyKnb7KDXgl582m9s2IB1EklsuPPS8N_Rw3tYCDJ08uQfGKz75Ct1CYiIUgmz_bl8y0JdSQmTHSjOG4yo7gOKy5mVGftjvo0-DNGOEAVLjKA/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/AVvXsEi-xkMVflr4jWPQPHRm0EiNYF3CLD5jLau0bGJSXZrdA7n7kWoHQJ9jvjtsOb7igz12QrGnJj2e8f4FnaNCTGpJ3lW-KevD3XVLGDWcOqwdgCthT3dQ7QFjcoVr9uBsBFPI_kfFibzGay8/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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>HTML:
<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>
<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/AVvXsEjqFP0oB0ry7SaONpsFayv5pVYTokLvz0Nn3WkLYWqYOX30oVVm_db6iZ54W7BMGRpl1MCOKnvhCpJ1R2NHI6Il4ef3ReN-aWqUe10oKRE1ukqYfC0C5s6tTru1YHS4ikYljEEVlQ4fHiU/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/AVvXsEjqFP0oB0ry7SaONpsFayv5pVYTokLvz0Nn3WkLYWqYOX30oVVm_db6iZ54W7BMGRpl1MCOKnvhCpJ1R2NHI6Il4ef3ReN-aWqUe10oKRE1ukqYfC0C5s6tTru1YHS4ikYljEEVlQ4fHiU/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/AVvXsEjsnqvmdhCEupP655UqBQiV0b8sInEmLINeyKnb7KDXgl582m9s2IB1EklsuPPS8N_Rw3tYCDJ08uQfGKz75Ct1CYiIUgmz_bl8y0JdSQmTHSjOG4yo7gOKy5mVGftjvo0-DNGOEAVLjKA/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/AVvXsEi-xkMVflr4jWPQPHRm0EiNYF3CLD5jLau0bGJSXZrdA7n7kWoHQJ9jvjtsOb7igz12QrGnJj2e8f4FnaNCTGpJ3lW-KevD3XVLGDWcOqwdgCthT3dQ7QFjcoVr9uBsBFPI_kfFibzGay8/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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>HTML:
<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>
<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/AVvXsEjOzb3spq6e5Pzo61oz1xbjZ1mruh9J2gNrZTUGSQuBHYU2HvwX62YILltnH2A-L4RPyxkqhCmxRH2U7lMf95BBNhR-hEQ3RzsnmKV7Jt5-4TlmtvRdzWqvgzKAt16FJqjeTJnjbvw_X2U/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/AVvXsEjOzb3spq6e5Pzo61oz1xbjZ1mruh9J2gNrZTUGSQuBHYU2HvwX62YILltnH2A-L4RPyxkqhCmxRH2U7lMf95BBNhR-hEQ3RzsnmKV7Jt5-4TlmtvRdzWqvgzKAt16FJqjeTJnjbvw_X2U/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/AVvXsEjsnqvmdhCEupP655UqBQiV0b8sInEmLINeyKnb7KDXgl582m9s2IB1EklsuPPS8N_Rw3tYCDJ08uQfGKz75Ct1CYiIUgmz_bl8y0JdSQmTHSjOG4yo7gOKy5mVGftjvo0-DNGOEAVLjKA/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/AVvXsEi-xkMVflr4jWPQPHRm0EiNYF3CLD5jLau0bGJSXZrdA7n7kWoHQJ9jvjtsOb7igz12QrGnJj2e8f4FnaNCTGpJ3lW-KevD3XVLGDWcOqwdgCthT3dQ7QFjcoVr9uBsBFPI_kfFibzGay8/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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/AVvXsEjnN0xon2B7aUVfmjyItcblihgHenWHiBfuv7Y48diYDxk3etkYKGiPUCRMW3ufvOA1vo2IJSHWiiZuA8i3HYmKy2W-DZWXrHGe5xB9wFtRDCSvUxqaVCOctM-d4m7CbD75y8njw4l7yYs/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/AVvXsEiZb-iffeYTXG4QUQmbcbWFN3QWb7Cw1FxAMVk135E4qgGe1-vHGjioMQ9D3TIYNq3ErKj2x-iKD_cFLMYffnzxfIcH7mNg8NyWb0TEY-CJHflsdm2gwNJYi6Mu25CVlSO9YEXmRIFnrFo/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>HTML:
<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>
<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.
52 Response to "9 Style Mega Menu Drop Down Blogger"
lumayan keren keren mas, cocok banget untuk web yang menunya banyak, jadi terlihat ringkas...
BalasGile... gede2 emang sesuai namanya mega menu,
Balasbagus semua tuh bang heheh..susah pilih yg mana yg bagus :D
Balasnice dahh
Semuanya memang sangat bagus,dan sudah kupasang ...
Balasterima kasih sudah berbagi
setuju dengan argumen mas agus..)
BalasSory banget kawan saya baru bisa hadir lagi disini,maklum di DUMAI lagi suibuk hehe
BalasBTW ada tutor baru lagi nih bro,,,mantappppp
aku juga setuju tuh,,jadi ringkas ringan gratis lagi hahaha
Balaspilih-pilih dulu nih. ^_^
Balaswah hebat dipasang semuanya. ^_^
BalasKeren banget sob, susah pilih yang mana semua bagus kok, jadi pusing nie
BalasKeren mas. Ada yg support sama responsive ndak? Saya butuh nih...hehehe
Balaskeren yang pertama sob . blognya juga keren
Balasback yah
Saya paling suka yang warna orange mas..
Balaskeren mas
BalasGema Takbir Menyapa Semesta,
BalasMembesarkan 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
wah keren banget nih mas Andes, baru tahu saya menu drop down model gini, kapan-kapan saya coba ah...
BalasRamadhan membasuh hati yang berjelaga,
BalasSaatnya 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,,,,,,,,,,,,,,,,,,,,,,,,,,,
Mantep mas andes..selamat hari raya idul fitri mohon maaf lahir dan bathin
Balassaya kurang setuju....
Balasbukan lumayan maksud nya
tapi emang keren dong :)
saya lebih condong suka yang blue style mas :)
Balassaya pun demikian ya mas Andes
Balasselamat hari raya idul fitri 1 syawal H
mohon mav lahir n bathin :)
kok nunggu kapan2 mas
Balaskburu bayar loh...hehe
pasti :)
Balassaya pilih yang terakhir aja,,, :)
BalasSelamat hari raya idul fitri.
BalasMohon maaf lahir dan batin. ^_^
taqoballahuminna waminkum,,, taqobal yaakarim,,,
Balasminal aizdin walfa'izdin ,,,,
mohon maaf lahir dan batin
gimana lebarannya mas andes?
Sepertinya asik nih di pasang di belog ku.. Dan sekalian mau ngucapin selamat hari lebaran, mohon maaf lahir batin
Balassebelum mengomentari karyanya
Balasizinkan saya Ruly dan keluarga mengucapkan minal aidzin walfaidzin
mohon maaf lahir dan bathin ...
Mantap mas keren ...... sulit diungkapkan dgn kata-kata
Dalam kerendahan hati ada ketinggian budi,
BalasDalam kemiskinan harta,ada kekayaan jiwa.
Kehidupan ini akan terasa indah bila ada ma’af
Taqobqlqllohu minna wa minkum
Syiamana wa syiamakum
ini kunjungan perdana saya,
Balassemoga bisa menjalin silaturahmi,
selamat idul fitri 1434 H :-)
postinganx agak berat mas.., tp keren lah! makasih ya.. :)
Balasmaaf lahir batin
“ฦฌฮฑqobbฮฑlฮฑllฮฑhu minnฮฑฮฑ ฯฮฑ minkum
(Semogฮฑ Alloh menerimฮฑ ฮฑmฮฑlku dฮฑn ฮฑmฮฑl kฮฑliฮฑn).”
Bagus banget mas menu nya ??
Balasmohon maaf lahir batin ya mas.... :)
keren2 mas, aarin ngubah warna tempalte blog dong
Balasoh ya
Mohon ma’af lahir dan batin ya mas
nggak mungkin bayar mas, mas Andes kan super baik hati hoho....
BalasMas Andes maafin yah kalau ada salah-salah kata :)
BalasMinal Aidin Wal Faidzin
Mohon Maaf Lahir Dan Batin
Selamat Hari Raya Idul Fitri 1 Syawal 1434 H
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...
Balaswuihhh kereen keren mas.. izin follow mas,follow back yah?? salam kenal..
Balasnyimak aja mas sekalian mau ngucapin
Balasselamat idul fitri 1434H mohon maaf lahir&bathin :)
Keren sekali gan menu drop downnya, kapan2 ane coba salah satu yang ada di blog ini. oia mohon maaf yaa gan :)
Balaswow banyak banget menu nya, keren" mas, izin copas kodenya dlu mas, terima kasih
BalasTerima kasih atas infonya gan
Balaswaw.... keren... ane suka tuh nyang warna biru
BalasSalam Mas Andes - http://mas-andes.blogspot.com
BalasJangan 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...
Oh maaf Mas Andes makasud nya Style mega menu gak sepenuh nya saya ambil
BalasCuma 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 .
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.
Balassaran 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
Wuihh yang ini lebih Mantap Mas,. Andes...?
BalasKeren Pool izin simak lagi Massss
Sukses terus yah Mas ?
ko gak kluar sih yng drodown.nya mas
Balaskoneksinya masih kurang baik mungkin mas, itu di atas lancar2 aja
Balasijin copy kang andes
BalasSalam 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
Balaskang, 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.
Balaspenyebabnya ada di kode ini mas.
Balas<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.
- 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