CSS Menu Drop Down

Rabu, 20 Juni 2012

Coba arahkan kursor kamu pada demo Css Menu Drop Down diatas. Bagaimana? Tertarik pengen memasang menu ini. Namun untuk menu ini tidak mau nyuport sama template bawaan blogger. Jadi usahakan pasang menu ini pada template selain template pemberian blogger.

Langkah-Langkahnya Sebagai berikut :

Masuk Ke Blog Sobat
Klik Rancangan Klik tambah Gadget Pilh HTML/Javascript
Copy Kode CSS dibawah ini Edit menu-menunya Dan ganti alamat URLnya
Lalu simpan dan Letakkan pada bagian atas blog Sobat

<style type="text/css">
#pad {height:100px;}
/* ================================================================
Styler : http://cuerosbhelatos.blogspot.com/
Untuk Menu ini Template Bawaan Blogger Kagak mau nyuport Sobat.
Pasang aja Pada template Lain pokoknya jangan template bawaan Blogger.
Don't Remove This Text
=================================================================== */
#binkbenkPositioner {width:100%; position:relative; float:left; top:-40px; margin-bottom:-40px; }

#binkbenkHolder {position:relative; float:left; left:50%;}

#binkbenk,
#binkbenk ul {padding:0; margin:0; list-style:none; font: 16px Comic Sans MS, sans-serif; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); position:relative; z-index:100;}
#binkbenk {height:45px; float:left; padding:0 ;-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius:10px; 10px; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); border: 3px inset red; position:relative; right:50%;}
#binkbenk ul {position:absolute; left:-9999px; top:-9999px;}

#binkbenk table {border-collapse:collapse; margin:-1px; padding:0; width:0; height:0;}
#binkbenk li {float:left;}

#binkbenk li a {display:block; float:left; color:#fff; height:30px; padding:0px 10px 0px 0px; line-height:30px; text-decoration:none; -moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius:10px; 10px; background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); border: 4px inset white; }
#binkbenk li a.sub {-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius:10px; 10px; background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); border: 3px inset white; }
#binkbenk li a b {display:block; float:left; height:40px; padding:0px 0px 0px 10px; cursor:pointer;}

#binkbenk li:hover {position:relative; z-index:100;}
#binkbenk a:hover {position:relative; z-index:100; color:#fc0;}
#binkbenk a.sub:hover {background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); }

#binkbenk li:hover > a {color:#fc0;}
#binkbenk li:hover > a.sub {background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690)); }

#binkbenk :hover ul {left:0; top:40px; z-index:300; width:130px; padding-top:4px; background:url(trans.gif);}
#binkbenk :hover ul li a {height:25px; width:120px; padding:0 0 0 10px; line-height:25px; background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); color:#fff; border-bottom:1px solid #a3b6c4; font-size:11px;}
#binkbenk :hover ul li a.fly {background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); }

#binkbenk :hover ul li a:hover {background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);font-size: 18px;
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));}
#binkbenk :hover ul li a:hover.fly {background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);font-size: 18px;
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));}
#binkbenk :hover ul li:hover > a {color:#fc0;}
#binkbenk :hover ul li:hover > a.fly {background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));}

#binkbenk :hover ul ul {position:absolute; left:-9999px; top:-9999px;}

#binkbenk :hover ul :hover ul {left:117px; top:0; padding:0;}
#binkbenk :hover ul :hover ul li a {background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); color:#000; border-bottom:1px solid #546775; font-size:11px;}
#binkbenk :hover ul :hover ul li a:hover {background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));font-size: 18px;}

#binkbenk a:hover {
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690)); transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg); font-size: 18px;}
</style>

<div id="binkbenkPositioner">
<div id="binkbenkHolder">
<ul id="binkbenk">
<li><a href="URL BLOG SOBATl"><b>Home</b></a></li>
<li><a href="URL BLOG SOBAT"><b>Single Menu</b></a></li>
<li class="current"><a class="sub" href="URL BLOG SOBAT"><b>Dropdown</b></a>

<ul class="sub1">
<li><a class="fly" href="URL BLOG SOBAT">Dropdown one</a>

<ul class="fly1">
<li><a href="URL BLOG SOBAT">Dropdown 1.1</a></li>
<li><a href="URL BLOG SOBAT">Dropdown 1.2</a></li>
<li><a href="URL BLOG SOBAT">Dropdown 1.3</a></li>
<li><a href="URL BLOG SOBAT">Dropdown 1.4</a></li>
<li><a href="URL BLOG SOBAT">Dropdown 1.5</a></li>
<li><a href="URL BLOG SOBAT">Dropdown 1.6</a></li>
</ul>

</li>
<li class="currentsub"><a class="fly" href="URL BLOG SOBAT">Dropdown two</a>

<ul class="fly2">
<li><a href="URL BLOG SOBAT">Dropdown 2.1</a></li>
<li><a href="URL BLOG SOBAT">Dropdown 2.2</a></li>
<li class="currentfly"><a href="URL BLOG SOBAT">Dropdown 2.3</a></li>
<li><a href="URL BLOG SOBAT">Dropdown 2.4</a></li>
<li><a href="URL BLOG SOBAT">Dropdown 2.5</a></li>
</ul>

</li>
<li><a href="URL BLOG SOBAT">Dropdown three</a></li>
<li><a href="URL BLOG SOBAT">Dropdown four</a></li>
<li><a class="fly" href="URL BLOG SOBAT">Dropdown five</a>

<ul class="fly3">
<li><a href="URL BLOG SOBAT">Dropdown 5.1</a></li>
<li><a href="URL BLOG SOBAT">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 3.3</a></li>
</ul>

</li>
</ul>

</li>
<li><a class="sub" href="URL BLOG SOBAT"><b>Dropliner</b></a>

<ul class="sub2">
<li><a href="URL BLOG SOBAT">Dropliner 1</a></li>
<li><a href="URL BLOG SOBAT">Dropliner 2</a></li>
<li><a href="URL BLOG SOBAT">Dropliner 3</a></li>
<li><a href="URL BLOG SOBAT">Dropliner 4</a></li>
<li><a href="URL BLOG SOBAT">Dropliner 5</a></li>
<li><a href="URL BLOG SOBAT">Dropliner 6</a></li>
</ul>

</li>
<li><a class="sub" href="URL BLOG SOBAT"><b>Dropping</b></a>

<ul class="sub3">
<li><a href="URL BLOG SOBAT">Dropping 1</a></li>
<li><a href="URL BLOG SOBAT">Dropping 2</a></li>
<li><a href="URL BLOG SOBAT">Dropping 3</a></li>
<li><a href="URL BLOG SOBAT">Dropping 4</a></li>
</ul>

</li>
<li id="support"><a href="URL BLOG SOBAT"><b>Contact</b></a></li>
<li id="contact"><a href="URL BLOG SOBAT"><b>Chat Box</b></a></li>
</ul>
</div>
</div>