-->
 
CSS Menu Drop Down

BERANDAARCHIVEQUR'ANYASINTAHLILAMALAN

     

Demo CSS Menu Drop Down

Coba arahkan Cursor sobat pada demo Css Menu drop down diatas
Bagaimana Sobat? Tertarik pengen Memasang Menu Ini....
Namun untuk menu ini kagak mau nyuport sama template bawaan Blogger
Jadi Usahakan Pasang Menu ini Pada Template selain Template pemberian Blogger
Template Bukan Dari Blogger Disini

Langkah-Langkahnya Sebagai berikut
  1. Masuk Ke Blog Sobat
  2. Klik Rancangan Klik tambah Gadget Pilh HTML/Javascript
  3. Copy Kode CSS dibawah ini Edit Menu-menunya Dan ganti Alamat URLnya
  4. Lalu simpan dan Letakkan pada bagian atas blog Sobat
    <style type="text/css">
    #pad {height:100px;}
    #binkbenkPositioner {width:100%; position:relative; float:left; top:-40px; margin-bottom:-40px; z-index:999;}

    #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><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="sub1">
                <li><a class="fly" href="URL BLOG SOBAT">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <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>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="currentsub"><a class="fly" href="URL BLOG SOBAT">Dropdown two<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <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>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </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<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <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>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a class="sub" href="URL BLOG SOBAT"><b>Dropliner</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
            <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>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a class="sub" href="URL BLOG SOBAT"><b>Dropping</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
            <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>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </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>
    Posted On : 29 Oktober 2011 Time : 18.05
    SHARE TO :
    | | Powered By : C.(BH-elatos) | Copyright By : cuerosbhelatos | |