CSS3 Dropdown Menu

kali ini saya akan membahas sebuah menu yang berguir kebawah atau dropdown dengan CSS3,mungkin para blogger pernah melihat blog seseorang yang menggunakan dropdown menu atau menu yang bergulir kebawah...
ok langsung saja
1. Cara membuatnya : Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/*----------------
CSS3 DropDown Menu
-------------------------------*/
#navcss {
margin: 0;
padding: 7px 6px 0;
background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJxQK0cgOh7SdJsKroMp6nh5j6RtugZ5SwRIflzRtNjrj_8Z-PTuU53Yr3RaflRY2YXhdSuqWjvYu6ajpSyI1_2saIitWHufbdGf8p1FFoedgNBa_Zpo_weYWqI-GZM6Sq7uNRpAj2uI/s1600/gradient.png) repeat-x 0 -110px;
line-height: 100%;

border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#navcss li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}


/* main level link */
#navcss a {
font-weight: bold;
color: #000;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;

-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#navcss a:hover {
background: #000;
color: #000;
}

/* main level link hover */
#navcss .current a, #navcss li:hover > a {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJxQK0cgOh7SdJsKroMp6nh5j6RtugZ5SwRIflzRtNjrj_8Z-PTuU53Yr3RaflRY2YXhdSuqWjvYu6ajpSyI1_2saIitWHufbdGf8p1FFoedgNBa_Zpo_weYWqI-GZM6Sq7uNRpAj2uI/s1600/gradient.png) repeat-x 0 -40px;
color: #000;
border-top: solid 1px #f8f8f8;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);

text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#navcss ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #000;

-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#navcss ul a:hover {
background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJxQK0cgOh7SdJsKroMp6nh5j6RtugZ5SwRIflzRtNjrj_8Z-PTuU53Yr3RaflRY2YXhdSuqWjvYu6ajpSyI1_2saIitWHufbdGf8p1FFoedgNBa_Zpo_weYWqI-GZM6Sq7uNRpAj2uI/s1600/gradient.png) repeat-x 0 -100px !important;
color: #000 !important;

-webkit-border-radius: 0;
-moz-border-radius: 0;

text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#navcss li:hover > ul {
display: block;
}

/* level 2 list */
#navcss ul {
display: none;

margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJxQK0cgOh7SdJsKroMp6nh5j6RtugZ5SwRIflzRtNjrj_8Z-PTuU53Yr3RaflRY2YXhdSuqWjvYu6ajpSyI1_2saIitWHufbdGf8p1FFoedgNBa_Zpo_weYWqI-GZM6Sq7uNRpAj2uI/s1600/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#navcss ul li {
float: none;
margin: 0;
padding: 0;
}

#navcss ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#navcss ul ul {
left: 181px;
top: -3px;
}

/* rounded corners of first and last link */
#navcss ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;

-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#navcss ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;

-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}

/* clearfix */
#navcss:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#navcss {
display: inline-block;
}

4. Simpan Kode berikut di bawah kode Head-nav(sesuai template) :

<ul id="navcss">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">My Projects</a>

<ul>
<li><a href="#">N.Design Studio</a>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">WordPress Themes</a></li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Illustrator Tutorials</a></li>

</ul>
</li>
<li><a href="#">Web Designer Wall</a>
<ul>
<li><a href="#">Design Job Wall</a></li>
</ul>
</li>
<li><a href="#">IconDock</a></li>

<li><a href="#">Best Web Gallery</a></li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>

<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>

</ul>
</li>

<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Another Link</a></li>

<li><a href="#">Department</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>

</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

Simpan template.......... selamat mencoba