MEMBUAT MENU PULLDOWN

Terinspirasi pertanyaan salah satu pengunjung tentang bagaimana caranya membuat menu pulldown horisontal, maka dibawah ini pakde buatkan listingnya secara langsung. Sebenarnya untuk membuat listing perlu sedikit pengetahuan tentang tag HTML. Namun bagi yang belum sempat mempelajarinya langsung aja copy paste tag berikut ini. Selanjutnya gantilah teks yang dicetak tebal atau berwarna merah dengan link postingan sobat.
Ikutilah langkah berikut :

1. Silahkan login ke www.blogger.com dengan akun sobat.
2. Pilih tab tata letak
3. Selanjutnya pilih Elemen halaman
4. Klik Tambah gagdet, kemudian pilih HTML/Java script.
5. Copykan listing pada tempat yang tersedia. Jika langkah sobat benar akan muncul gambar seperti berikut :
6. Klik Simpan.
   

Ini adalah listingnya :

<!doctype transitional//en 1.0 -//w3c//dtd public html xhtml http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<style media="screen" type="text/css">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0; width:1px}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>
<div class="pd_menu_01 ">
<ul><li><a href="#">Home</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/08/bismillahirrahmanirrahiim-selamat.html" class="lastone">Klik disni</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Agama</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/09/anda-berada-di-halaman-agama-silahkan.html" class="lastone">Klik disni</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Iptek</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/08/menu-komputer-klik-menu-dibawah-ini.html">Komputer</a></li>
<li><a href="http://www.itku.co.cc/2009/09/anda-berada-di-halaman-pendidikan.html">Pendidikan</a></li>
<li><a href="http://www.itku.co.cc/2009/09/anda-berada-di-halaman-tip-dan-trik.html">Tip & Trik</a></li>
<li><a href="http://www.itku.co.cc/2009/08/anda-berada-di-halaman-umum-silahkan.html">Umum</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Humor</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/09/anda-berada-di-halaman-humor-silahkan.html" class="lastone">Klik di sini</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Download</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/09/anda-berada-di-halaman-referensi.html">Referensi</a></li>
<li><a href="http://www.itku.co.cc/2009/09/software-gratis-maap-fitur-ini-belum.html">Software</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Link Sahabat</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/09/silahkan-memasang-link-anda-disini-dan.html" class="lastone">Klik di sini</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Ruang Guru</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/10/anda-berada-di-halaman-pojok-guru.html">Klik di sni</a></li>
</ul>
<ul><li><a href="#">Pasang Iklan</a>
<ul>
<li><a href="http://www.itku.co.cc/2009/09/iklan.html">Klik di sni</a></li>
</ul>
</li></ul>
</li></ul></div>
</!doctype>

Setelah itu copy TAG diatas dan paste di tempat yang sobat inginkan
Selamat mencoba.