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 Dropdown ini 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.
Following CSS

#nav_top{list-style:none;margin:0;padding:0;width:100%;}
#nav_top li{list-style:none;display:block;float:left;position:relative;}
#nav_top li a{background:#4B4A32;display:block;text-align:center;margin:3px 0 2px 3px;padding:8px 6px;border:1px outset #787864;box-shadow:2px 0 3px #787864,-2px 0 5px #fff;-moz-box-shadow:2px 0 3px #787864,-2px 0 5px #fff;-webkit-box-shadow:2px 0 3px #787864,-2px 0 5px #fff;-o-box-shadow:2px 0 3px #787864,-2px 0 5px #fff;color:#fff;font-weight:normal;text-shadow:-1px 1px 2px#000,0 0 2px#fff;}
#nav_top li a:hover,#nav_top li:hover a{background:#787864;text-decoration:none;}
#nav_top ul{width:175px;margin:0;padding:0;list-style:none;position:absolute;z-index:1;top:100%;left:0;display:none;transition:all 0.3s;-o-transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;}
#nav_top li:hover ul{display:block;background:#787864;}
#nav_top li li{float:none;list-style:none;display:block;transition:all 0.4s;-o-transition:all 0.4s;-moz-transition:all 0.4s;-webkit-transition:all 0.4s;}
#nav_top li ul li a{background:#787864; display:block;padding:3px 0 3px 2px;margin-top:0px;border:1px outset #787864;box-shadow:0 1px 2px #444444,0 -2px 4px #fff;-o-box-shadow:0 1px 3px #444444,0 -2px 4px #fff;-moz-box-shadow:0 1px 2px #444444,0 -2px 4px #fff;-webkit-box-shadow:0 1px 2px #444444,0 -2px 4px #fff;width:120px;
color:#fff;font-weight:normal;text-shadow:-1px 1px 2px#000,0 0 2px#fff;transition:all 0.3s;-o-transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;text-align:left;}
#nav_top li:hover li a{padding:6px 0 6px 6px;margin-top:2px;width:160px;}
#nav_top li ul li:hover a,#nav_top li:hover li a:hover{background:#4B4A32;text-decoration:none;}

HTML

<ul id="nav_top"><li><a href="http://www.id-mastony.blogspot.com">Home</a></li>
<li><a href="http://id-mastony.blogspot.com/2012/07/contak.html">Contact</a></li>
<li><a href="#">Css</a><ul><li><a href="http://id-mastony.blogspot.com/search/label/Css">Tutorial Css</a></li><li><a href="http://id-mastony.blogspot.com/search/label/Navigasi">Navigasi</a></li><li><a href="http://id-mastony.blogspot.com/search/label/Css3">CSS3 </a></li></ul></li>
<li><a href="#">Html</a><ul><li><a href="http://id-mastony.blogspot.com/search/label/Html">Html</a></li><li><a href="http://id-mastony.blogspot.com/search/label/Link">Link</a></li></ul></li>
<li><a href="http://id-mastony.blogspot.com/search/label/Blogspot">Blogspot</a><ul><li><a href="http://id-mastony.blogspot.com/search/label/Post">Post</a></li><li><a href="http://id-mastony.blogspot.com/search/label/Penampilan">Penampilan</a></li></ul></li>
<li><a href="http://id-mastony.blogspot.com/search/label/Seo">Seo</a></li>
<li><a href="http://id-mastony.blogspot.com/search/label/Bloging">Bloging</a></li>
<li><a href="http://id-mastony.blogspot.com/search/label/Widget">Widget</a></li>
</ul>

NOTE : untuk menambahkan sub menu/anak menu tinggal menambahkan dibawah <li> #Submenu </li>
dan untuk merubah besarnya menu ubah bagian padding li a 
GAGAL! jika tidak ngefek gunakan div contoh
#navtop{///}
#navtop ul{///}
Saya kira  cukup sekian tentang Cara membuat menu navigasi dropdown di blog
Semoga bermanfaat bagi sobat ..