CSS3 Dropdown Menu

Pada Tutorial Sebelumnya Musa Khairul Umam Sudah Menerangkan Cara Membuat Menu Toolip Dengan Efek JQuery (Smart Menu) akan tetapi pada Tutorial Blog Ini akan Membuat CSS3 Dropdown Menu untuk demonya bisa lihat disini  trik ini mudah untuk digunakan sobat hanya menambah css diatas kode ]]></b:skin>  dan membuat menunya dengan add gadget atau di bawah kode <div id='header-wrapper'> bagaimana apakah sobat tertarik untuk membuatnya ? jika tertarik mari kita mulai simak tutorialnya dibawah ini: 

1. 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/AVvXsEjvM11RzgQpMvjusYHDHwA1Fm94DaYDW3X5ELKKc_D2lHQ7s_kuoVozOrWGIcdCsZNkdYKuSdVjczKEFoVhvvUwXAu3WU17KmXeneLk9wRt1C8dpWGnonnicMbYOQhuena9MwHtZGpCIVI/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/AVvXsEjvM11RzgQpMvjusYHDHwA1Fm94DaYDW3X5ELKKc_D2lHQ7s_kuoVozOrWGIcdCsZNkdYKuSdVjczKEFoVhvvUwXAu3WU17KmXeneLk9wRt1C8dpWGnonnicMbYOQhuena9MwHtZGpCIVI/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/AVvXsEjvM11RzgQpMvjusYHDHwA1Fm94DaYDW3X5ELKKc_D2lHQ7s_kuoVozOrWGIcdCsZNkdYKuSdVjczKEFoVhvvUwXAu3WU17KmXeneLk9wRt1C8dpWGnonnicMbYOQhuena9MwHtZGpCIVI/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/AVvXsEjvM11RzgQpMvjusYHDHwA1Fm94DaYDW3X5ELKKc_D2lHQ7s_kuoVozOrWGIcdCsZNkdYKuSdVjczKEFoVhvvUwXAu3WU17KmXeneLk9wRt1C8dpWGnonnicMbYOQhuena9MwHtZGpCIVI/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.lalu save template 

       5.lalu pilih add gadget lalu copy dan paste di kolom add gadget

      

<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>

  

     6.Untuk yang dari <div id='header-wrapper'> pastekan kode diatas di bawah <div id='header-wrapper'>

     7.dan yang terakhir jangan lupa untuk menyimpannya

Selamat Mencoba

 Note :Menu ini bisa dikembangkan sesuai keinginan masing-masing... :), ^_^