Cara membuat menu drop down cantik menggunakan CSS

1. Masuk ke akun blogger

2. Pilih rancangan

3. Pilih menu elemen laman

4. Tambah gadget, pilih html/java script

Copy pastekan kode dibawah ini dan hapus tulisan yang berwarna biru.
*Script ini saya dapat dari master Gubhugreyot.blogspot.com

Kode CSS Multilevel Drop Down Menu

<style type="text/css">
#bgsGR_HzMenu {
margin: -10px 0 0 0;
padding: 7px 6px 0;
background: #222 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -99px;
line-height: 100%;
border-radius: 0.2em;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
box-shadow: 1px 1px 15px rgba(0,0,0, .4);
-moz-box-shadow:1px 1px 15px rgba(0,0,0, .4);
-webkit-box-shadow: 1px 1px 15px rgba(0,0,0, .4);
}
#bgsGR_HzMenu:hover {
box-shadow: 1px 3px 10px rgba(0,0,0, .5);
-moz-box-shadow: 1px 1px 15px rgba(0,0,0, .5);
-webkit-box-shadow: 1px 2px 15px rgba(0,0,0, .5);
}
#bgsGR_HzMenu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#bgsGR_HzMenu a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding:5px 12px;
margin:0;
border-radius:0.7em;
-moz-border-radius: 0.7em;
-webkit-border-radius: 0.7em;
text-shadow: 2px 2px 4px #000;
}
#bgsGR_HzMenu a:hover {
background:#000;
color: #fff;
}
#bgsGR_HzMenu a#satu{
transition:2s ease-in-out;
-o-transition:2s ease-in-out;
-moz-transition:2s ease-in-out;
-webkit-transition:2s ease-in-out;
transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
border:1px solid #444;
box shadow:0px -1px 4px #999;
background:#333 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -100px;
}
#bgsGR_HzMenu a#satu:hover{
transform: scale(1.3);
-o-transform: scale(1.3);
-moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
text-shadow:2px 3px 4px #000;
border:1px solid #fff;
}
#bgsGR_HzMenu .current a, #bgsGR_HzMenu li:hover > a {
background: blue url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -40px;
border-top: solid 1px #f8f8f8;
box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(156,156,156, 1);
}
#bgsGR_HzMenu .current a{color:#3399FF;}
#bgsGR_HzMenu li:hover > a {color:red;}
#bgsGR_HzMenu ul li:hover a, #bgsGR_HzMenu li:hover li a {
background: none;
border: none;
color: #666;
box-shadow:none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
#bgsGR_HzMenu ul li:hover a, #bgsGR_HzMenu li:hover li a{
    border-radius:0.1em;
-moz-border-radius: 0.1em;
-webkit-border-radius: 0.1em;
}
#bgsGR_HzMenu ul a:hover {
background: #000 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -100px !important;
color: #fff !important;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
#bgsGR_HzMenu li:hover > ul {
display: block;
}
#bgsGR_HzMenu ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 28px;
left: 0;
background: #444 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 0;
border: solid 1px #b4b4b4;
border-radius: 10px;-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 2px 13px #777;
-webkit-box-shadow: 0 2px 13px #777;
-moz-box-shadow: 0 2px 13px #777;
transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
#bgsGR_HzMenu ul:hover {
margin-top:10px;
transform: scale(1.1);
-o-transform: scale(1.1);
-moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
box-shadow: 0 2px 13px #000;
-webkit-box-shadow: 0 2px 13px #000;
-moz-box-shadow: 0 2px 13px #000;
}
#bgsGR_HzMenu ul li {
float: none;
margin: 0;
padding: 0;
border-radius:none;
-moz-border-radius:none;
-webkit-border-radius:none;
}
#bgsGR_HzMenu ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
border-radius: 0px;
-moz-border-radius: 0x;
-webkit-border-radius: 0px;
}
#bgsGR_HzMenu ul ul {
left: 181px;
top: -3px;
}
#bgsGR_HzMenu ul li:first-child > a {
background: #222 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -40px;
border-top-left-radius:9px;
border-top-right-radius:9px;
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 9px;
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 9px;
text-shadow:0px 1px 1px #000;color:white;
}
#bgsGR_HzMenu ul li:last-child > a {
border-bottom-left-radius:9px;
border-bottom-right-radius:9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
-webkit-border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
text-shadow:0px 1px 1px #000;color :white;
}
#bgsGR_HzMenu:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#bgsGR_HzMenu {
display: inline-block;
}
html[xmlns] #bgsGR_HzMenu {
display: block;
}
* html #bgsGR_HzMenu {
height: 1%;
}
</style>

Kode HTML CSS3 Multilevel Drop Down Menu

<ul id="bgsGR_HzMenu">

<li class="current"><a id="satu" href="Link-1">Nama Link-1    </a></li>
    <li><a id="satu" href="Link-2">Nama Link-2</a>
      <ul>
        <li><a href="Link-2a">Nama Link-2a</a>
          <ul>
            <li><a href="Link-2a-1">Nama Link-2a-1</a></li>
            <li><a href="Link-2a-2">Nama Link-2a-2</a>
              <ul>
                <li><a href="Link-2a-2.1">Nama Link-2a-2.1</a></li>
                <li><a href="Link-2a-2.2">Nama Link-2a-2.2</a></li>
                <li><a href="Link-2a-2.3">Nama Link-2a-2.3</a></li>
              </ul>
            </li>
            <li><a href="Link-2a-3">Nama Link-2a-3</a></li>
          </ul>
        </li>
      <li><a href="Link-2b">Nama Link-2b</a></li>
      <li><a href="Link-2c">Nama Link-2c</a></li>
      <li><a href="Link-2d">Nama Link-2d</a>
        <ul>
          <li><a href="Link-2d-1">Nama Link-2d-1</a></li>
          <li><a href="Link-2d-2">Nama Link-2d-2</a></li>
          <li><a href="Link-2d-3">Nama Link-2d-3</a></li>
        </ul>
      </li>
    </ul>
</li>

<li><a id="satu" href="Link-3">Nama Link-3</a>
    <ul>
      <li><a href="Link-3a">Nama Link-3a</a>
        <ul>
          <li><a href="Link-3a-1">Nama Link-3a-1</a></li>
          <li><a href="Link-3a-2">Nama Link-3a-2</a></li>
          <li><a href="Link-3a-3">Nama Link-3a-3</a></li>
          <li><a href="Link-3a-4">Nama Link-3a-4</a></li>
        </ul>
      </li>
      <li><a href="Link-3c">Nama Link-3c</a></li>
      <li><a href="Link-3d">Nama Link-3d</a></li>
    </ul>
</li>

<li><a id="satu" href="Link-4">Nama Link-4</a>
    <ul>
      <li><a href="Link-4a">Nama Link-4a</a></li>
      <li><a href="Link-4b">Nama Link-4b</a></li>
    </ul>
</li>

<li><a id="satu" href="Link-5">Nama Link-5</a></li>

<li><a id="satu" href="Link-5">Nama Link-6</a></li>

</ul>