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='http://dudi085780036281.blogspot.com'>Home</a></li>
<li><a class='trigger' href='http://dudi085780036281.blogspot.com'>
Pendidikan</a>
<ul>
<li><a href='http://dudi085780036281.blogspot.com'>
Kesehatan</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>
Pramuka</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>
Software</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>
Blog</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>
Nonton TV Onlie</a></li>
</li></li></li></li></ul>
</li>
<li><a class='trigger' href='http://dudi085780036281.blogspot.com'>
Lifestyle</a>
<ul>
<li><a href='http://dudi085780036281.blogspot.com'>
Health</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>
Travel</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>
Food</a></li>
</li></li></ul>
</li>
<li><a class='trigger' href='http://dudi085780036281.blogspot.com'>
Design</a>
<ul>
<li><a href='http://dudi085780036281.blogspot.com'>
Art</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>
Web</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>
Blog</a></li>
</li></li></ul>
<li><a class='trigger' href='http://dudi085780036281.blogspot.com'>
Technology</a>
<ul>
<li><a href='http://dudi085780036281.blogspot.com'>
Handphone</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>
Gadget</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>
Computer</a></li>
</li></li></ul>
<li><a class='trigger' href='http://dudi085780036281.blogspot.com'>
Sports</a>
<ul>
<li><a href='http://dudi085780036281.blogspot.com'>
Tennis</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>
Moto GP</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>
Bulu Tangkis</a></li>
</li></li></ul>
<li><div id='coom'><a class='trigger' href='http://dudi085780036281.blogspot.com'>
Community</a></div></li>
</li></li></li></ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div></div>
Ganti kode yang berwarna merah sesuaikan dengan blog anda.
Ganti
http://dudi085780036281.blogspot.com dengan URL yang dituju saat di klik.
