Cara Membuat Menu Horizontal Drop Down Dengan CSS3

Kali ini saya akan membahas bagaimana cara membuat Menu Horizontal Drop Down Dengan CSS3 menu drop down kali ini tampilan dan warna nya lebih menarik, selain itu menggunakan gaya CSS3 yang bisa memukau siapa saja yang melihat nya. Cara membuatnya tidak ribet cukup satu langkah langsung jadi. Baiklah bagi sobat yang pingin membuat menu CSS3 ini ikuti langkah-langkah di bawah ini:

Cara Membuat 
1. Login ke blog kamu.
2. Pilih Rancangan > Add Gadget > HTML JavaScript.

3. Dan copy kode di bawah ini.

<style> #css3pic{background: rgb(176,174,38); /* Fallback Background color */ background: url(images/pattern.png), -moz-linear-gradient(top, rgba(176,174,38,1) 0%, #6e6c00 100%); background:url(images/pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,174,38,1)), color-stop(100%,rgba(110,108,0,1)));width:980px;border-top:1px solid #ccc;margin:0 auto;padding:0 auto;border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: solid 1px #251400;} #css3wrapper{width:980px;height:27px;margin:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #css3bar{width:100%} #css3bar,#css3bar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #css3bar a{display:block;text-decoration:none;font-size:12px;font-weight:bold;text-transform:uppercase;color:#333;padding:8px 8px 8px} #css3bar a.trigger{padding:8px 13px 8px 9px} #css3bar li{float:left;position:static;width:auto} #css3bar li ul,#css3bar ul li{width:140px} #css3bar ul li a{text-align:left;color:#fff;font-size:11px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px;} #css3bar li ul{z-index:100;position:absolute;display:none;background:#333;padding-bottom:5px;border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: solid 1px #251400;} #css3bar li:hover a,#css3bar a:active,#css3bar a:focus,#css3bar li.hvr a{;color:#fff;-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #css3bar li:hover ul,#css3bar li.hvr ul{background: rgb(176,174,38); /* Fallback Background color */ background: url(images/pattern.png), -moz-linear-gradient(top, rgba(176,174,38,1) 0%, #6e6c00 100%); background:url(images/pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,174,38,1)), color-stop(100%,rgba(110,108,0,1)));display:block} #css3bar li:hover ul a,#css3bar li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none} #css3bar li ul li.hr{border-top:1px solid #444;display:block;font-size:1px;height:0;line-height:0;margin:2px 0} #css3bar ul a:hover{background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066); background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066); background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066); background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);!important;color:#fff!important;text-decoration:none} </style> <div id='css3pic'> <div id='css3wrapper'> <ul id='css3bar'> <li><a href='#'>Home</a></li> <li><a class='trigger' href='#'>Blogger</a> <ul> <li><a href='#'>Tutorial Blogger</a></li> <li class='hr'/> <li><a href='#'>Tips Blogger</a></li> <li class='hr'/> <li><a href='#'>Widget</a></li> <li class='hr'/> <li><a href='#'>CSS</a></li> <li class='hr'/> <li><a href='#'>jQuery</a></li> </ul> </li> <li><a class='trigger' href='#'>Lifestyle</a> <ul> <li><a href='#'>Health</a></li> <li class='hr'/> <li><a href='#'>Travel</a></li> <li class='hr'/> <li><a href='#'>Food</a></li> </ul> </li> <li><a class='trigger' href='#'>Design</a> <ul> <li><a href='#'>Art</a></li> <li class='hr'/> <li><a href='#'>Web</a></li> <li class='hr'/> <li><a href='#'>Blog</a></li> </ul> <li><a class='trigger' href='#'>Technology</a> <ul> <li><a href='#'>Handphone</a></li> <li class='hr'/> <li><a href='#'>Gadget</a></li> <li class='hr'/> <li><a href='#'>Computer</a></li> </ul> <li><a class='trigger' href='#'>Sports</a> <ul> <li><a href='#'>Tennis</a></li> <li class='hr'/> <li><a href='#'>Moto GP</a></li> <li class='hr'/> <li><a href='#'>Bulu Tangkis</a></li> </ul> <li><div id='coom'> <a class='trigger' href='#'>Community</a></div> </li> </ul> <br class='clearit'/> </div> <div style='clear:both;'/> </div>

Ganti kode warna biru (width atau lebar) sesuaikan dengan blog anda. Ganti tanda # dengan URL yang dituju saat di klik.

dikutip dari: http://blazerracing.blogspot.com/2012/06/cara-membuat-menu-horizontal-drop-down_17.html