Cara membuat multi level dropdown menu dengan CSS3

Selalu menyenangkan untuk belajar dan mengeksplorasi standar baru yang diperkenalkan CSS. Seiring dengan perkembangan HTML5 dan CSS3, skrip berat dan tool flash jarang digunakan. Kita akan belajar membuat dan menerapkannya ke Blogger. Menu ini semata-mata murni CSS3  tanpa menggunakan jquery sama sekali! 

Menu ini menggunakan box-shadow sederhana, text-shadow dan properti radius border.

Menu ini kompatibel dengan semua browser seperti FireFox, Chrome dan Safari. Anda hanya perlu copy dan paste kode. Menu ini dibuat oleh webDesignerWall dan disesuaikan dengan platform Blogspot blog  oleh MBT.

View Demo

CARA MENAMBAHKAN MENU INI DI BLOG

1. Silahkan masuk ke akun blogger anda.
2. Klik Tata Letak-> Tambahkan Gadget-> HTML/Javascript
3. Pastekan semua kode berikut dibawah ini kedalamnya:

<style>
#MBT-Container {
    font: normal 1em Arial, Helvetica, sans-serif;
     width:100%; float:left;   
}
a {
    color: #333;
}
#nav {
    margin: 0;
    padding: 7px 6px 0;
    background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU9WqD72_0WL4NbTnHB5s6ba_HC0FdyXM5w8zaCGfU19UqiWvuqtSNqjeWU-ObLdmr_pwjX3-N8shNzvCVi3oe-er8MZiF2h5Hd4j2wNpLJ2WXHFQnjilWTUjPua6Q9j4QAgl_xyTGzk/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);
}
#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none; }

/* main level link */
#nav a {
    font-weight: bold;
    color: #e7e5e5;
    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);
}
#nav a:hover {
    background: #000;
    color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
    background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU9WqD72_0WL4NbTnHB5s6ba_HC0FdyXM5w8zaCGfU19UqiWvuqtSNqjeWU-ObLdmr_pwjX3-N8shNzvCVi3oe-er8MZiF2h5Hd4j2wNpLJ2WXHFQnjilWTUjPua6Q9j4QAgl_xyTGzk/s1600/gradient.png) repeat-x 0 -40px;
    color: #444;
    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 */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
#nav ul a:hover {
    background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU9WqD72_0WL4NbTnHB5s6ba_HC0FdyXM5w8zaCGfU19UqiWvuqtSNqjeWU-ObLdmr_pwjX3-N8shNzvCVi3oe-er8MZiF2h5Hd4j2wNpLJ2WXHFQnjilWTUjPua6Q9j4QAgl_xyTGzk/s1600/gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
text-align:left;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
    display: block;
}
/* level 2 list */
#nav ul {
    display: none;
text-align:left;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU9WqD72_0WL4NbTnHB5s6ba_HC0FdyXM5w8zaCGfU19UqiWvuqtSNqjeWU-ObLdmr_pwjX3-N8shNzvCVi3oe-er8MZiF2h5Hd4j2wNpLJ2WXHFQnjilWTUjPua6Q9j4QAgl_xyTGzk/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);
}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}
#nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
    left: 181px;
    top: -3px;
}
/* rounded corners of first and last link */
#nav 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;
}
#nav 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 */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#nav {
    display: inline-block;
}
</style>

<div id="MBT-Container">
<ul id="nav">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Blogger Tricks</a>
<ul>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 1
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
</a></li></ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>
               
<li><a href="#">Sub Sub-Row 2</a></li>
</ul>
</li>
<li><a href="#">Sub-Row</a></li>
<li><a href="#">Sub-Row</a></li>
</ul>
</li>

<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level Item 1</a></li>
<li><a href="#">Sub-Level Item 1</a>
<ul>
<li><a href="#">Sub-Level Item 11</a></li>
<li><a href="#">Sub-Level Item 22</a></li>
<li><a href="#">Sub-Level Item 33</a></li>
</ul>
</li>
                   
<li><a href="#">Sub-Level Item 1</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 2</a></li>
<li><a href="#">Sub-Level Item 2</a></li>
<li><a href="#">Sub-Level Item 2</a></li>
</ul>
</li>
</ul>
</li><li><a href="#">Sitemap</a></li>   
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Create This »</a></li>

</ul></div>
<br/>

  
KET:

• Ganti tanda # dengan URL/Link anda dan ganti teks judul menu sesuai yang anda inginkan.

</li><li><a href="#">Sitemap</a></li>

• Untuk merubah warna silahkan ganti #0080ff     Dengan warna yang anda inginkan.       
• Simpan Gadget dan lihat hasilnya...

Original source