Cara Membuat Menu Droup Down Dengan CSS

Cara Membuat Menu Droup Down Dengan CSS Kali ini SAYA akan Mencoba Membuat Menu Droup Down Dengan CSS, Siapa tau ANDA lagi muter muter bersama Om 

Google dan lagi mencari tampilan menu yang sesuai dengan tema blog itu sendiri. Menu ini sangat mudah Asal ngerti cara memasang nya. Silahkan simak saja caranya dibawah ini 

1. Masuk ke account blogger
2. Untuk membuat caranya mudah tinggal pilih Rancangan >> Edit HTML
3. Lalu cari kode ]]></b:skin> dan copykan kode CSS dibawah ini diatas nya.

nav{font:bold 16px Calibri,Arial,Sans-Serif}
nav *{margin:0 0 0 0; padding:0 0 0 0; list-style:none}
nav ul{background:#0A8603; background:-webkit-linear-gradient(top,#0A8603,#1F6A1C); background:-moz-linear-gradient(top,#0A8603,#1F6A1C); background:-ms-linear-gradient(top,#0A8603,#1F6A1C); background:-o-linear-gradient(top,#0A8603,#1F6A1C); background:linear-gradient(top,#0A8603,#1F6A1C); height:40px; -webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left; display:inline}
nav li a{padding:0px 15px; line-height:40px; color:#111; text-shadow:0px 1px 0px rgba(255,255,255,0.3); display:block; text-decoration:none; -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1)}
nav li a:hover{background:rgba(0,0,0,0.1)}
nav li a:active{background:#0A8603; background:-webkit-linear-gradient(bottom,#0A8603,#1F6A1C); background:-moz-linear-gradient(bottom,#0A8603,#1F6A1C); background:-ms-linear-gradient(bottom,#0A8603,#1F6A1C); background:-o-linear-gradient(bottom,#0A8603,#1F6A1C); background:linear-gradient(bottom,#0A8603,#1F6A1C)}
nav li ul{display:block; width:170px; position:absolute; left:auto; z-index:10; height:auto; visibility:hidden; opacity:0; -webkit-transition:all 0.26s ease-out 0.2s; -moz-transition:all 0.26s ease-out 0.2s; -ms-transition:all 0.26s ease-out 0.2s; -o-transition:all 0.26s ease-out 0.2s; transition:all 0.26s ease-out 0.2s}
nav li li{display:block; float:none; width:100%}
nav li:hover &amp;amp;amp;amp;gt;ul{visibility:visible; width:200px; opacity:1}
nav li li ul{left:200px; margin-top:-40px}
nav li.sub &amp;amp;amp;amp;gt;a{position:relative; padding-right:30px}

4. Lalu Klik Pratinjau Kalau sudah tidak ada masalah lagi Tinggal Simpan Tempelats
5. Buka Tata Letak lalu Tambah Gadget Pilih HTML JAVAScript  dan masukan Scrip dibawah ini

<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li class="sub"><a href="#">Jurnal</a>
<ul>
<li><a href="#">2000</a></li>
<li><a href="#">2001</a></li>
<li class="sub"><a href="#">2002</a>
<ul>
<li><a href="#">21 April</a></li>
<li><a href="#">22 April</a></li>
<li class="sub"><a href="#">23 April</a>
<ul>
<li><a href="#">Senin</a></li>
<li><a href="#">Selasa</a></li>
<li><a href="#">Rabu</a></li>
<li><a href="#">Kamis</a></li>
</ul>
</li>
<li><a href="#">24 April</a></li>
<li><a href="#">25 April</a></li>
</ul>
</li>
<li><a href="#">2003</a></li>
<li><a href="#">2004</a></li>
</ul>
</li>
<li><a href="#">Komentar</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>

NB: Bisa juga dipasang  code ini di antara header dan conten-wrapper atau di taruh di bawah header,atau </head> ya sesuakain saja di mana harusnya ini di letakan..Sekian Semoga bermanfaat.

 tips saya 

bila sudah berhasil, jangan lupa banyak bersyukurlah pada tuhan hahahaha,,,,,,,,,,,,,,,,,!
wassalam,,,,,,,,,,,,,,,,,