CSS Menu Drop Down CSS Menu Drop Down

Demo CSS Menu Drop Down 

• Home



• Single Menu



• Dropdown
  
  
  
  
  
  
  
  • Dropdown one
    
    
    
    
    
    
    
    • Dropdown 1.1
    
    
    
    • Dropdown 1.2
    
    
    
    • Dropdown 1.3
    
    
    
    • Dropdown 1.4
    
    
    
    • Dropdown 1.5
    
    
    
    • Dropdown 1.6
    
    
    
    
    
    
    
    
  
  
  
  • Dropdown two
    
    
    
    
    
    
    
    • Dropdown 2.1
    
    
    
    • Dropdown 2.2
    
    
    
    • Dropdown 2.3
    
    
    
    • Dropdown 2.4
    
    
    
    • Dropdown 2.5
    
    
    
    
    
    
    
    

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>

Selamat Mencoba Semoga Bermanfaat