Membuat Menu Dropdown Keren

Selamat malam sobat
malam ini saya mau share tentang menu dropdown yang menurut saya lumayan bagus :D, untuk Penampakanya sobat bisa langsung lihat bagian menu DROPDOWN yang ada di blog ini,. atau sobat bisa juga lihat gambar di bawah ini,. 

Kalo di perhatikan, menu DROPDOWN ini mirip sekali dengan yang ada di setiap template buatan MAS-SUGENG atau hampir sama dengan yang ada di template Fast Magazine Mas Sugeng. .

Keren kan sob menu DROPDOWNnya hehe

yaudah langsung aja yuk menuju cara pemasanganya

1.Masuk Ke Akun Blogger Sobat.> Pilih Menu Template Dan Edit HTML

2.Cari Kode ]]></b:skin> Dan Copast Code Berikut. Simpat Tepat Di Atas Kode ]]></b:skin>

/* Menu Navigasi Caritau*/

#navigation{height:38px;width:925px;position:relative;background-color:#393939;box-shadow:0 2px 6px 0 #ccc;-moz-box-shadow:0 2px 6px 0 #ccc;margin:0 auto 0;padding:0 18px 0 18px;border-bottom:3px solid #426DEC;}#navigation li{position:relative;line-height:38px;float:left;list-style:none;display:inline-block;padding:0 0 0 0;margin:0 0 0 0;}#navigation li a{padding:0 18px;color:#eee;display:block;font-family:'Oswald',Arial,Helvetica,sans-serif;letter-spacing:0.5;font-size:14px;font-weight:500;text-align:left;text-shadow:1px 1px 0 #222;}#navigation li a.home{background-position:16px -54px;width:46px;padding:0 0;background-color:#426DEC;text-indent:-9999px;overflow:hidden;}#navigation li a{border-left:1px solid #222;border-right:1px solid #444;}#navigation li:hover a{background-color:#426DEC;color:#fff;}#navigation li .sub-nav-wrapper{display:block;position:absolute;z-index:30;margin-left:0px;}#navigation li .sub-nav-wrapper .sub-nav{width:150px;margin:4px 0 0 0;padding:0 0 0 0;background:#fff;border-top:1px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,0.35);}#navigation li:hover .sub-nav-wrapper{display:block;}#navigation li .sub-nav-wrapper .sub-nav li{list-style:none;float:none !important;line-height:26px;display:block;margin:0 0 0 0;padding:0;text-align:left;border-bottom:1px solid #d7d7d7;}#navigation li .sub-nav-wrapper .sub-nav li:first-child{}#navigation li .sub-nav-wrapper .sub-nav li:last-child{border:none;}#navigation li .sub-nav-wrapper .sub-nav li a{border:none !important;background:transparent !important;display:block;padding:0 20px;font-size:12px;font-weight:small;color:#4b4b4b !important;text-shadow:none;box-shadow:inset 0 0 2px rgba(255,255,255,1.0);-moz-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);-webkit-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);}#navigation li .sub-nav-wrapper .sub-nav li:hover{background:#eaeaea;border-bottom:1px solid #ccc;}#navigation li .sub-nav-wrapper{pointer-events:none;opacity:0;filter:alpha(opacity=0);top:0;transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-webkit-transition:all 0.35s ease-in-out;}#navigation li:hover .sub-nav-wrapper{pointer-events:auto;opacity:1;filter:alpha(opacity=100);top:30px;}

#navigation #search{font-family:'Oswald',Arial,Helvetica,sans-serif;float:right;margin:5px 0 5px 10px;}#navigation li.search{float:right;line-height:normal;}#navigation #search input[type="text"]{height:28px;line-height:28px;background-color:#5b5b5b;background-position:188px -245px;border:0 none;font-size:10px;font-weight:515;text-shadow:1px 1px 0 #222;color:#fff;width:57px;padding:0 15px;-webkit-transition:all 0.7s ease 0 s;-moz-transition:all 0.7s ease 0s;-o-transition: all 0.7s ease 0s;transition:all 0.7s ease 0s;box-shadow: inset 2px 2px 0 #4f4f4f;}#navigation #search input#search-button{height:28px;width:30px;background-color:#4b4b4b;background-position:8px -246px;border:none;float:right;cursor:pointer;}#navigation #search input[type="text"]:focus{background-color:#fff;text-shadow:none !important;outline:none;width:155px;color:#555;box-shadow: inset 2px 2px 0 #eee;}#navigation #search input#search-button,.post-info-icon,.home,.back-to-top{background-image:url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");background-repeat:no-repeat;}

Lihat Kode Paling Atas Dibawah  /*  Menu Navigasi Caritau*/
Ada Code #navigation { height:38px;width:990px; Ganti  Kode Berwarna Merah Sesuai Lebar Template Sobat, Bila Terlalu Panjang Tinggal Ganti Saja990 Menjadi Berapalah Lebih Kecil

3.Jika Pada Template Sobat Sudah Ada Menu Navigasi Nya sobat Tinggal Ganti aja Code Menu Navigasi Sobat Dengan Kode Berikut Ini.Atau Cari Kode.

header>  : untuk menempatkan menu di atas nama blog
/header> : untuk menempatkan menu di bawah nama blog

• Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode</header>

<nav>

<ul id='navigation'>

<li class='current'>

<a class='home' href='/' title='Home'>Home</a>

</li>

<li>

<a href='#' title='Menu 1'>Menu 1</a>

<div class='sub-nav-wrapper'>

<ul class='sub-nav'>

<li><a href='#' title='Sub Menu 1'>Sub Menu 1</a></li>

<li><a href='#' title='Sub Menu 2'>Sub Menu 2</a></li>

<li><a href='#' title='Sub Menu 3'>Sub Menu 3</a></li>

</ul>

</div>

</li>

<li><a href='#' title='Menu 2'>Menu 2</a></li>

<li><a href='#' title='Menu 3'>Menu 3</a></li>

<li>

  <a href='#' title='Menu 4'>Menu 4</a>

<div class='sub-nav-wrapper'>

<ul class='sub-nav'>

<li><a href='#' title='Sub Menu 1'>Sub Menu 1</a></li>

<li><a href='#' title='Sub Menu 2'>Sub Menu 2</a></li>

<li><a href='#' title='Sub Menu 3'>Sub Menu 3</a></li>

<li><a href='#' title='Sub Menu 4'>Sub Menu 4</a></li>

</ul>

</div>

</li>

<li><a href='/Error404' title='Error'>Error</a></li>

<li class='search'>

<form action='/search' id='search' method='get'>

<input name='q' placeholder='Cari Apa Gan...' size='45' type='text'/><input id='search-button' type='submit' value=''/></form>

</li>

</ul>

</nav>

4.Ganti # , Menu , Dan Sub Menu .Sesuai Keinginan sobat

5.Simpan Template Sobat... selesai deh hehe

Saya rasa cukup sekian dulu ya artikel saya hari ini, semoga bisa berguna bagi sobat semua,.

terimakasih :))