Menu Horisontal Drop Down Part 2

Blogger mania setelah kemarin saya bahas Menu Drop Down 1 dengan bentuk yang semacam itu kali ini saya berikan lagi dengan bentuk yang demikian...livedemo
sebenarnya menu ini didapat dari penyedia menu CSS menumaker
modif saya lakukan karena menyesuaikan warna pada template yang saya pasang dengan mengedit beberapa gambar (image) yang akan diupload (unggah) untuk dipasang pada menu ini.


OK saya bahas..langsung gimana cara pasangnya :

1. Masuk ke Blogger anda
2. Menu Tata letak - Edit HTML
3. masukkan Kode dibawah ini diatas kode ]]></b:skin>
   
   
   

   /* kyipe */<br /> .bg {background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4.gif);}<br /> .menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/bg.png) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }<br /> .menu li.top {display:block; float:left; position:relative;}<br /> .menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}<br /> .menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}<br /> .menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/down.gif) no-repeat right top;}<br /> .menu li a.top_link:hover {color:#000; background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4.gif) no-repeat;}<br /> .menu li a.top_link:hover span {background:url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4.gif) no-repeat right top;}<br /> .menu li a.top_link:hover span.down {background:url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4a.gif) no-repeat right top;}<br /> <br /> .menu li:hover > a.top_link {color:#000; background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4.gif) no-repeat;}<br /> .menu li:hover > a.top_link span {background:url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4.gif) no-repeat right top;}<br /> .menu li:hover > a.top_link span.down {background:url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4a.gif) no-repeat right top;}<br /> <br /> .menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}<br /> <br /> .menu a:hover {visibility:visible;}<br /> .menu li:hover {position:relative; z-index:200;}<br /> <br /> .menu ul,<br /> .menu :hover ul ul,<br /> .menu :hover ul :hover ul ul,<br /> .menu :hover ul :hover ul :hover ul ul,<br /> .menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}<br /> <br /> .menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #009900; white-space:nowrap; width:200px; height:auto;}<br /> .menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}<br /> .menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}<br /> .menu :hover ul.sub li a.fly {background:#fff url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/arrow.gif) 80px 7px no-repeat;}<br /> .menu :hover ul.sub li a:hover {background:#42c555; color:#fff;}<br /> .menu :hover ul.sub li a.fly:hover {background:#42c555 url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/arrow_over.gif) 80px 7px no-repeat; color:#fff;}<br /> .menu :hover ul li:hover > a.fly {background:#42c555 url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/arrow_over.gif) 80px 7px no-repeat; color:#fff;}<br /> <br /> .menu :hover ul :hover ul,<br /> .menu :hover ul :hover ul :hover ul,<br /> .menu :hover ul :hover ul :hover ul :hover ul,<br /> .menu :hover ul :hover ul :hover ul :hover ul :hover ul<br /> {left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}<br />
   
   
   
   
4. Simpan
5. Masuk Ke Elemen Halaman
6. Tambah Gadget - HTML Java Script
7. Copy Kode dibawah ini dan ganti dengan link dan nama web/URL yang anda inginkan (disarankan editnya Pake Notepad)
   
   <div>
   <ul class="menu">
   <li class="top"><a href="http://smp2kaliwungu.blogspot.com/" class="top_link"><span>Home</span></a></li>
   <li class="top"><a href="http://smp2kaliwungu.blogspot.com/" class="top_link"><span>About Us</span></a>
   <ul class="sub">
   <li><a href="http://smp2kaliwungu.blogspot.com/2009/08/alamat.html">Address</a></li>
   <li><a href="http://smp2kaliwungu.blogspot.com/2009/08/visi-misi.html">Visi & Misi</a></li>
   <li><a href="http://www.smpn2kaliwungu.co.cc/2009/08/struktur-organisasi-sekolah.html">STRUKTUR ORGANISASI</a></li>
   <li><a href="http://eskulsmpn2klw.blogspot.com/">Ekstra Kurikuler</a></li>
   <li><a href="http://smp2kaliwungu.blogspot.com/2009/10/peta-satelit.html">Peta</a></li>
   </ul>
   </li>
   <li class="top"><a href="http://smp2kaliwungu.blogspot.com/" class="top_link"><span>Profile</span></a>
   <ul class="sub">
   <li><a href="http://guru-smp2kaliwungu.blogspot.com/">Teacher</a></li>
   <li><a href="http://staff-smp2kaliwungu.blogspot.com/">Staff</a></li>
   </ul>
   </li>
   <li class="top"><a href="http://smp2kaliwungu.blogspot.com/" class="top_link"><span>Content</span></a>
   <ul class="sub">
   <li><a href="http://mail.smp2kaliwungu.co.cc/">E-mail</a></li>
   <li><a href="http://www.facebook.com/group.php?gid=159207540782">Facebook</a></li>
   </ul>
   </li>
   <li class="top"><a href="http://soal-smpn2klw.blogspot.com/" class="top_link"><span>Soal - Soal</span></a></li>
   <li class="top"><a href="http://galery-smp2kaliwungu.blogspot.com/" class="top_link"><span>Gallery</span></a></li>
   <li class="top"><a href="http://alumnismp2klw.blogspot.com/" class="top_link"><span>Alumni</span></a></li>
   </ul>
   </div>
   />
   
   
   
   
   
   
8. Paste pada kotak yang disediakan
9. simpan

Cara Menambah sub Menu mudah kok tinggal tambah elemennya
misal ya... pada gambar dibawah ini....
yang warna merah adalah elemen pembuka menu, dan merah tua adalah penutup menu,
jika kita ingin menambah sub menu maka yang warna biru yang ditambahkan elemennya, dan yang ungu adalah penutup sub menunya

<div>
<ul class="menu">
<li class="top"><a href="http://smp2kaliwungu.blogspot.com/" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="http://smp2kaliwungu.blogspot.com/" class="top_link"><span>About Us</span></a>
<ul class="sub">
<li><a href="http://smp2kaliwungu.blogspot.com/2009/08/alamat.html">Address</a></li>
<li><a href="http://smp2kaliwungu.blogspot.com/2009/08/visi-misi.html">Visi & Misi</a></li>
<li><a href="http://www.smpn2kaliwungu.co.cc/2009/08/struktur-organisasi-sekolah.html">STRUKTUR ORGANISASI</a></li>
<li><a href="http://eskulsmpn2klw.blogspot.com/">Ekstra Kurikuler</a></li>
<li><a href="http://smp2kaliwungu.blogspot.com/2009/10/peta-satelit.html">Peta</a></li>
</ul>
</li>
Selamat mencoba !!

Semoga bermanfaat menu yang satu ini dan sudah teruji kelayakannya...jiakakakaka