Cara Membuat Menu Drop Down Elegan dengan CSS

Salam Sejahtera!!! Jumpa lagi di halaman Tutorial Blog saya, Kali ini saya mau membahas tentang cara membuat menu drop down yang elegan dengan memakai CSS. Nah, Kebanyakan pengguna blog atau website memakai cara ini karena alasannya adalah untuk menghemat ruang untuk sebuah blog atau website. Apalagi jika anda sedang membangun sebuah blog/website dengan kategori banyak, sangat cocok dengan menggunakan teknik drop down menu. Kita bisa temukan di internet banyak tutorial menunjukkan kepada kita bagaimana membangun Navigasi dengan efek drop dengan menggunakan Javascript. Tapi Hari ini, dengan tutorial ini, Anda akan melihat cara termudah untuk membangun efek yang sama dengan menggunakan CSS saja. Dengan beberapa CSS make-up, menu Anda akan lebih elegan wow..!! pokoknya mantap :D. Dan ini sudah support dengan IE6.

Ok anda bisa memilih navigasi horizontal atau yang Vertikal.
Kalo anda ingin melihat bentuk visualnya, silahkan Klik Demo Preview dibawah ini :
Lihat Demo
Baiklah, langsung aja kepokok pembahasannya aja :D
1. Silahkan Login ke Blogger Dasbor anda
2. Klik Menu Layout->>Edit HTML
3. Cari Kode </head> dan letakkan kode dibawah ini diatasnya.

<link rel="stylesheet" href="https://sites.google.com/site/tutorialbloghost/my_css/ElegantDropMenustyle.css" type="text/css" media="screen">
<!--[if IE 6]>
<style type="text/css">
#vertical-navigation li:hover ul li a,
#vertical-navigation ul li a{
line-height: 50%;}
#vertical-navigation ul{top: 2.5em;}
</style>
<![endif]--> 

4. Kemudian cari kode dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tutorial Blog (Header)' type='Header'/>
</b:section>
</div>

5. Letakkan kode navigasi dibawah ini tepat dibawah kode diatas( tidak wajib )

<ul id="horizontal-navigation">
<li class=""> <a href="#">Menu Induk 1</a> </li>
<li class=""> <a href="#">Menu Induk 2</a><ul>
<li class=""> <a href="#">Anak Menu 1</a> </li>
<li class=""> <a href="#">Anak Menu 2</a> </li>
<li class=""> <a href="#">Anak Menu 3</a> </li>
</ul></li>
<li class=""> <a href="#">Menu Induk 3</a>
<ul>
<li class=""> <a href="#">Anak Menu 1</a> </li>
<li class=""> <a href="#">Anak Menu 2</a> </li>
</ul>
</li>
<li class=""> <a href="#">Menu Induk 4</a> </li>
</ul>

6. Lalu klik tombol Simpan Template

Catatan !!!

Kalo anda suka yang vertikal, silahkan ganti <ul id="horizontal-navigation"> menjadi : <ul id="vertical-navigation">dan cocok ditempatkan di sidebar.
Ganti Menu Induk dengan Menu Utama anda.
Tanda "#" ganti dengan alamat menu anda

 Selamat Mencoba- dan kalo ada yang kurang jelas silahkan tinggalkan pertanyaan diruang komentar dibawah ini.  [Happy Blogging]