Cara Membuat Menu Drop Down dengan Code CSS

Cara Membuat Menu Drop Down dengan Code CSS,berikut langkah-langahnya:

1. Sign in di akun blogger.com Sobat

2. Pilih blog yang mau di terapkan menu ini

3. Pilih menu >> Template (tampilan blogger diperbaharui) lalu >>Edit HTML;

4. Beri tanda centang pada tulisan >> Expand Template Widget;

5. Carilah kode yang kurang lebih seperti berikut ini ( gunakan ctrl+F untuk mempermudah pencarian): ]]></b:skin>

Letakan Code berikut di atas Code  ]]></b:skin> 

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_RgMm15mWZCcRXuWEo2h0ZBGsYGem2NVI0ABlph5nRUeJYfPJ6qHgmk1ifgeZwTB4zAKMyPqESNtlUfVOlNpBzpEtsRoC6ELkEt6YY3AhzCQwOn4U25kWKXpQnKaoBwnibunwOHs6gmMr/s1600/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Z9ffA7pAOOF8BY7Xbd3kRz7l7yIvcxAHtkDtkC4qkt-RnUUoj5VpawRSXrzwwJvONOdePX44KrsaNnff-NOr-4omMoDxJb2z7A1OSYZ7wF_9ZE1vFwDRzVF-vzBkOgFvzE_RiSvxSGYq/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit52ecl_HuH8UeFQ0aBJinsEfI00vFj4B6IQjSbSF4Rc5l2HKcdq7H005AIB2ir5omrRfkRzuoz66Yx0yg-Rcu4E6TSXQJvhhbe45tNrrcSQ0O56kL3jD2pJGmHmy2N4oGaaniNBV0ayzp/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_RgMm15mWZCcRXuWEo2h0ZBGsYGem2NVI0ABlph5nRUeJYfPJ6qHgmk1ifgeZwTB4zAKMyPqESNtlUfVOlNpBzpEtsRoC6ELkEt6YY3AhzCQwOn4U25kWKXpQnKaoBwnibunwOHs6gmMr/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_RgMm15mWZCcRXuWEo2h0ZBGsYGem2NVI0ABlph5nRUeJYfPJ6qHgmk1ifgeZwTB4zAKMyPqESNtlUfVOlNpBzpEtsRoC6ELkEt6YY3AhzCQwOn4U25kWKXpQnKaoBwnibunwOHs6gmMr/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYJCpoEd_-qgc5RhWcV46hoYsquvPeyjNWVLKrlOByZvZsTeUYfUHnMFGT2jncZTzKptO8E9ACcTnXzCjPQdArg8dMO7r3fOYOYgG7P8J5bF6R7gWPc3tVsHzDOrGfG23V4q116UJqycpO/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_RgMm15mWZCcRXuWEo2h0ZBGsYGem2NVI0ABlph5nRUeJYfPJ6qHgmk1ifgeZwTB4zAKMyPqESNtlUfVOlNpBzpEtsRoC6ELkEt6YY3AhzCQwOn4U25kWKXpQnKaoBwnibunwOHs6gmMr/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_RgMm15mWZCcRXuWEo2h0ZBGsYGem2NVI0ABlph5nRUeJYfPJ6qHgmk1ifgeZwTB4zAKMyPqESNtlUfVOlNpBzpEtsRoC6ELkEt6YY3AhzCQwOn4U25kWKXpQnKaoBwnibunwOHs6gmMr/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYJCpoEd_-qgc5RhWcV46hoYsquvPeyjNWVLKrlOByZvZsTeUYfUHnMFGT2jncZTzKptO8E9ACcTnXzCjPQdArg8dMO7r3fOYOYgG7P8J5bF6R7gWPc3tVsHzDOrGfG23V4q116UJqycpO/s1600/button4a.gif) no-repeat right top;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #009900; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNAFfwDMl2-krdjoV0B-EKg2e5O7j1aDsaY33TDmYeukytjF_-ZbVPiTnnMoS_ERfyZQIeocbcOJIA-A9cynsJ5Z8MqlQsl30YsRgjIQ4ULSjm8NrhEY33p4ZfTXfwMEMzoNYJ9aRL8_oW/s1600/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#42c555; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#42c555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrv5l6B7HesNL8GeG3TbYijmjODUDIAfwnhbKA9546eXEj-a9SeiTHnx2LcvMuZ6rm_LccpxRJacfMrn0ds5IHSIywJLpSXabB0HpX4rVGF7Ni-u-xta7noaptY5zBTyfpILuf-8VfgdSO/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#42c555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrv5l6B7HesNL8GeG3TbYijmjODUDIAfwnhbKA9546eXEj-a9SeiTHnx2LcvMuZ6rm_LccpxRJacfMrn0ds5IHSIywJLpSXabB0HpX4rVGF7Ni-u-xta7noaptY5zBTyfpILuf-8VfgdSO/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}

Setelah itu Klik >> Simpan Template dan keluar dari Edit Template.
Kemudian  Klik >> Tata Letak >> Add Gadget/Tambah Gadget >> HTML/JavaScript, paste kan Code berikut ini:

 <ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Menu 1</span></a>
<ul class="sub">
<li><a href="#">Sub Menu 1-1</a></li>
<li><a href="#">Sub Menu 1-2</a></li>
<li><a href="#">Sub Menu 1-3</a></li>
<li><a href="#">Sub Menu 1-4</a></li>
<li><a href="#">Sub Menu 1-5</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Menu 2</span></a>
<ul class="sub">
<li><a href="#">Sub Menu 2-1</a></li>
<li><a href="#">Sub Menu 2-2</a></li>
<li><a href="#">Sub Menu 2-3</a></li>
<li><a href="#">Sub Menu 2-4</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sub Menu 3</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sub Menu 4</span></a></li>
</ul>

Ket: Ganti tulisan berwarna Biru dengan nama menu yang di inginkan dan Sub Menu  dengan Sub Menu yang di inginkan, Simpan dan tempatkan widgetnya ke tempat yang sesuai dengan keinginan.........

SELESAI...

Anda sedang membaca artikel tentang Cara Membuat Menu Drop Down dengan Code CSS dan Anda bisa menemukan artikel Cara Membuat Menu Drop Down dengan Code CSS ini dengan url http://dyenps-cabangsipon.blogspot.com/2012/08/cara-membuat-menu-drop-down-dengan-code.html sobat boleh menyebarluaskannya atau mengcopy paste-nya jika artikel Cara Membuat Menu Drop Down dengan Code CSS ini bermanfaat bagi Anda,namun jangan lupa untuk meletakkan link ini sebagai sumbernya:<a href="http://dyenps-cabangsipon.blogspot.com/2012/08/cara-membuat-menu-drop-down-dengan-code.html">Cara Membuat Menu Drop Down dengan Code CSS</a>

Artikel Terkait:

Posted in: Tutorial Blogger