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 ..

Terima kasih Anda telah membaca Artikel mengenai Cara membuat menu navigasi dropdown dan Kata kunci untuk Artikel ini yaitu Cara membuat menu navigasi dropdown