Membuat widget drop down menu simple menarik

Contoh Gambar
Cara pemasangan: 1. log in ke blog  2. pilih tempat penyimpanan gadget. " yang tepatnya di atas  posting blog untuk menyimpan di atas postingan." seperti gambar, 3. Tambahkan gadget  dan Pilih lokasi penyimpanan , 4. copy script  drop down menu ini  lalu paste kan di kotak Html/java script Mudah kan ,,,,,,  Tambahan:

• Dan untuk tulisan yang berwarna MERAH sobat bisa ganti nama sesuai keinginan sobat.
• Untuk yang berwarna BIRU adalah link, alamat yang aka dituju jika di klil nama tersebut.

<style>

/* Blue  shadow Dropdown Menu by www.trickalinoka1.blogspot.com */

#nav {

display:inline-block;

width:100%;

margin:0px auto;

padding:0;

background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5veQAXGQtK52h5K-GFn1xEacbC1ufCu45vU3DGIKCrvsSCtlqK_ZmbIlMgHtnfNZSSlUIbN67FSzImx8LsHg1YMX76GfxvRnaCIaTaUtI7dATUQ6XEa_d9ON7hmzTv_EdVDN297plAwgx/s320/bg-ABT.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/

-moz-border-radius:10px;

-webkit-border-radius:10px;

box-shadow:0 2px 2px rgba(0,0,0, .5);

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

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

}

#nav li {

margin:10px;

float:left;

position:relative;

list-style:none;

}

#nav a {

font-family:verdana;

font-weight:bold;

color:#e7e5e5;

text-decoration:none;

display:block;

padding:8px 20px;border-radius:10px; /*some css3*/

-moz-border-radius:10px;

-webkit-border-radius:10px;

text-shadow:0 2px 2px rgba(0,0,0, .7);

}/* selected menu element */

#nav .current a, #nav li:hover > a {

background:#7788aa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5veQAXGQtK52h5K-GFn1xEacbC1ufCu45vU3DGIKCrvsSCtlqK_ZmbIlMgHtnfNZSSlUIbN67FSzImx8LsHg1YMX76GfxvRnaCIaTaUtI7dATUQ6XEa_d9ON7hmzTv_EdVDN297plAwgx/s320/bg-ABT.png) repeat-x 0 -20px;

color:#000;

border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/

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

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

text-shadow:0 2px 2px rgba(255,255,255, 0.7);

}/* sublevels */

#nav ul li:hover a, #nav li:hover li a {

background:none;

border:none;

color:#000;

}

#nav ul li a:hover {

background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5veQAXGQtK52h5K-GFn1xEacbC1ufCu45vU3DGIKCrvsSCtlqK_ZmbIlMgHtnfNZSSlUIbN67FSzImx8LsHg1YMX76GfxvRnaCIaTaUtI7dATUQ6XEa_d9ON7hmzTv_EdVDN297plAwgx/s320/bg-ABT.png) repeat-x 0 -100px;

color:#fff;border-radius:10px; /*some css3*/

-moz-border-radius:10px;

-webkit-border-radius:10px;

text-shadow:0 2px 2px rgba(0,0,0, 0.7);

}#nav ul li:first-child > a {

-moz-border-radius-topleft:10px; /*some css3*/

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

-webkit-border-top-left-radius:10px;

-webkit-border-top-right-radius:10px;

}

#nav ul li:last-child > a {

-moz-border-radius-bottomleft:10px; /*some css3*/

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

-webkit-border-bottom-left-radius:10px;

-webkit-border-bottom-right-radius:10px;

}/* drop down */

#nav li:hover > ul {

opacity:1;

visibility:visible;

}

#nav ul {

opacity:0;

visibility:hidden;

padding:0;

width:175px;

position:absolute;

background:#aabbcc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5veQAXGQtK52h5K-GFn1xEacbC1ufCu45vU3DGIKCrvsSCtlqK_ZmbIlMgHtnfNZSSlUIbN67FSzImx8LsHg1YMX76GfxvRnaCIaTaUtI7dATUQ6XEa_d9ON7hmzTv_EdVDN297plAwgx/s320/bg-ABT.png) repeat-x 0 0;

border:1px solid #7788aa;border-radius:10px; /*some css3*/

-moz-border-radius:10px;

-webkit-border-radius:10px;

box-shadow:0 2px 2px rgba(0,0,0, .5);

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

-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;

-webkit-transition:opacity .25s linear, visibility .1s linear .1s;

-o-transition:opacity .25s linear, visibility .1s linear .1s;

transition:opacity .25s linear, visibility .1s linear .1s;

}

#nav ul li {

float:none;

margin:0;

}

#nav ul a {

font-weight:normal;

text-shadow:0 2px 2px rgba(255,255,255, 0.7);

}

#nav ul ul {

left:160px;

top:0px;

}

</style> 

    <ul id="nav">

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

        <li><a href="#">About me</a>

            <ul>

                <li><a href="#">Daftar isi</a></li>

                <li><a href="#">Kirim pesan</a>

                    <ul>

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

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

                    </ul>

                </li>

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

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

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

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

            </ul>

        </li>

        <li><a href="#">Kirim pesan</a>

            <ul>

                <li><a href="#">Via internet</a>

                    <ul>

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

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

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

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

                    </ul>

                </li>

                <li><a href="#">Arsip album</a>

                    <ul>

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

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

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

                    </ul>

                </li>

            </ul>

        </li>

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

        <li><a href="http://www.trickalinoka1.blogspot.com">FAQ's</a></li>

    </ul>

UNTUK PERTANYAAN YANG KUARANG DI PAHAMI.

Contak saya di
Send Email :------> alinlienk@gmail.com
Add Facebook :---------> Alinoka