Cara membuat menu navigasi dropdown

di kesempatan ini mastony akan membahas bagaimana Cara membuat menu navigasi dropdown ( dengan anak menu/sub menu ) , Apa itu Menu Navigasi dropdown ..?Sebetulnya mastony sudah membahas pada postingan sebelumnya yaitu ..Cara membuat navigasi tanpa Dropdown .Namun kali ini ada sub menunya/anak menu.Navigasi Dropdownini sangat unik bila pointer mouse diarahkan pada  induk menu ( menu yang di beri sub menu ) maka sub menu/anak menu akan jatuh kebawah .
Menu Navigasi di blog sangatlah penting untuk setiap pengunjung yang berkunjung ke blog kita,Sehingga dengan adanya menu navigasi pengunjung akan dengan mudah menemukan artikel - artikel dari blog kita,nah gimana ..?,sobat tertarik untuk membuat.
Berikut langkah - langkah sederhana ini :
1.Login ke blogger
2.Pilih Template >> Edit Html >> Cari cepat (CTRL+F ) Cari kode ]]></b:skin> 
3.jika sudah Copy dan paste kode css berikut tepat sebelum/di atasnya kode ]]></b:skin> 

#nav ,#nav ul{ list-style-type:none; margin:0; padding:0;width:auto;background:#008E00;;
height:auto;}
#nav li{list-style-type:none; margin:0; padding:0;float:left;position:relative;}
#nav li a{background:#008E00;color:#fff; text-align:center; margin:0; padding:10px 12px 10px 12px;font-weight:bold;font-size:12px;font-famili:Georgia, Times New Roman, Arial;height:auto;display:block;text-shadow:0 1px 2px #000;text-decoration:none;}
#nav li a:hover,#nav ul li:hover a{background:#007D47; color:#fff; padding:10px 12px 10px 12px;text-decoration:none;}
#nav li li{float:none;width:170px;margin:0;padding:0;display:block;}
#nav li:hover li a{background:none;}
#nav li ul{z-index:200;
/*top:1em;
/*left:0;*/ height:auto;width:170px; margin:0; padding:0;position:absolute;display:none;}
#nav li:hover ul{display:block;}
#nav li ul a{background:#008E00;color:#fff; text-align:left; margin:0; padding:8px 8px 8px 8px;font-weight:bold;font-size:12px;font-famili:Georgia, Times New Roman, Arial;height:auto;display:block;text-transform:capitalize;}
#nav li ul a:hover,#nav li ul li:hover a{background:#007D47; color:#fff;margin:0; padding:8px 8px 8px 8px;text-decoration:none;text-shadow:0 1px 2px #000;}

• Jika sudah simpan Template sobat.Kemudian pilih Tata letak >> Add gadget >> Html/JavaScript >> lalu copy dan paste seperti Berikut :

<div id="nav">
<ul id="nav">
<li><a href="http://id-mastony.blogspot.com">
HOME</a></li>
<li><a href="http://id-mastony.blogspot.com/2012/07/about.html">ABOUT</a></li>
<li><a href="http://id-mastony.blogspot.com/2012/07/contak.html">CONTACT</a></li>
<li><a href="http://id-mastony.blogspot.com/2012/07/buku-tamu_13.html">BUKU TAMU</a></li>
<li><a href="http://draft.blogger.com/">CATEGORIES</a>
<ul><li><a href="http://id-mastony.blogspot.com/search/label/Postingan">Sub menu 1</a></li>
<li><a href="http://id-mastony.blogspot.com/search/label/Template">Sub menu 2</a></li>
<li><a href="http://id-mastony.blogspot.com/search/label/Tips%20Seo">Sub menu 3</a></li></ul></li>
</ul></div>

NOTE : untuk menambahkan sub menu/anak menu tinggal menambahkan dibawah <li> #Submenu </li>
Saya kira  cukup sekian tentang Cara membuat menu navigasi dropdown di blog
Semoga bermanfaat bagi sobat ..