Simple CSS dropdown menu for blogger-1

Ini adalah sebuah dropdown menu sederhana yang cantik untuk melengkapi blog anda. Hanya menggunakan kode css yang dipadu dengan css3. Tak banyak kode yang digunakan. Jika selama ini anda mengalami kesulitan untuk memasang dropdown menu di bawah header blog, inilah menu yang tepat yang langsung bisa berfungsi dengan baik tanpa kendala. Anda dapat memasang menu setinggi yang anda suka tanpa perlu kuwatir anak menu tak muncul atau hilang ketika menyentuh halaman posting.

Untuk menggunakan menu ini anda harus mengcopy css reset untuk blogger tabs yang ada di posting sebelumnya. Anda bisa buka link di bawah ini untuk membuka postingnya:
CSS Reset For Blogger Tabs

Simpan kode css reset blogger tabs di bawah kode ]]></b:skin>, kemudian kode css menu dropdown di bawah kode css reset.
xHTML disimpan melalui Add a Gadget di Eelemen Crosscol yang terletak di bawah elemen header atau di atas post page. Buka melalui dasbor » Tata Letak (Elemen Laman/Page Element).

Kode CSS

.time{
        behavior:url(#default#time2);
        }
#GRddlevelmenu{
        width:100%;
        height:30px;
        background:#666;
        border-bottom:1px solid #aaa;
        }
#GRddlevelmenu ul{
        margin:0;
        padding:0;
        list-style:none;
        white-space:nowrap;
        text-align:left;
        }
#GRddlevelmenu ul li{
        padding:0 0 1px 0;
        display:inline-block;
        background:rgba(0,0,0,.1);
        }
#GRddlevelmenu li{
        float:left;
        }
#GRddlevelmenu ul ul{
        position:absolute;
        display:none;
        left:0;
        top:30px;
        border:1px solid rgba(0,0,0,.3);
        }
#GRddlevelmenu ul.level1 li.level1-li{
        float:left;
        display:block;
        position:relative;
        }
#GRddlevelmenu ul{
        background:rgba(20,20,20,.6);
        }
#GRddlevelmenu span, #GRddlevelmenu a{
        display:inline-block;
        font:normal 14px arial,sans-serif;
        color:#fff;
        line-height:30px;
        text-decoration:none;
        padding:0 10px 0 20px;
        border-left:1px solid #aaa;
        transition:0.4s;
        -o-transition:0.4s;
        -ms-transition:0.4s;
        -moz-transition:0.4s;
        -webkit-transition:0.4s;
        }
#GRddlevelmenu ul ul a{
        border:1px solid #555;
        }
#GRddlevelmenu ul.level1 li.level1-li a.level1-a{
        float:left;
        }
#GRddlevelmenu ul li:hover > ul{
        display:block;
        border-radius:0 6px 4px 4px;
        border-top:2px solid #aaa;
        z-index:99999;width:182px;
        }
#GRddlevelmenu ul li:hover > ul li a{
        border-bottom:1px dotted #555;
        white-space:normal;
        line-height:24px;
        background:rgba(0,0,0,.4);
        width:150px;
        letter-spacing:-1px;
        }
#GRddlevelmenu ul li:hover > ul li:hover a{
        background:rgba(255,255,255,.5) url(https://lh4.googleusercontent.com/-W2KHx5F2CEk/UBf9s5cRwqI/AAAAAAAAC-w/RlHizlKoTas/h120/arrow-right-red-11x16.png) 4px 6px no-repeat;
        background-size:10px auto;
        color:yellow;
        border:1px solid #000;
        text-shadow:1px 0px 1px #000;
        }
#GRddlevelmenu li:hover{
        background:rgba(0,0,0,.6);
        cursor:default;
        }
#GRddlevelmenu li:hover > a, #GRddlevelmenu li:hover > span{
        color:orange;
        }

xHTML

<div id="GRddlevelmenu">
<ul class="level1">
    <li class="level1-li" id="a1"><a class="level1-a" href="http://bestbloggermenus.blogspot.com">Home</a></li>
    <li class="level1-li" id="a1"><a class="level1-a" href="http://twitter.com/gubhugreyot">Follow me on Twittter</a></li>
    <li class="level1-li" id="s1"><span>Daftar Blog</span>
        <ul class="time" begin="s1.mouseenter" end="s1.mouseleave" timeAction="display">
            <li><a href="http://gubhugreyot.blogspot.com">gubhugreyot</a></li>
            <li><a href="http://bgsgr.blogspot.com">css3 Tutorial & Demo</a></li>
            <li><a href="http://gubhugreyot-demo-tutorial-1.blogspot.com">Demo Tutorial-1</a></li>
            <li><a href="http://gubhugreyot-demo-tutorial-2.blogspot.com">Demo Tutorial-2</a></li>
            <li><a href="http://lightbox-demo-tutorial.blogspot.com">Lightbox for Blogger</a></li>
            <li><a href="http://tantytm.blogspot.com">Modifikasi Blog</a></li>
            <li><a href="http://gubhugreyot.blogdetik.com">gubhugreyot-blogdetik</a></li>
            <li><a href="http://bloggerstuars.blogspot.com">Bloggerstars1</a></li>
            <li><a href="http://gitosimin.blogspot.com">Mas Gitosamin</a></li>
            <li><a href="http://bestbloggerhack.blogspot.com">Best Blogger Hacks</a></li>
            <li><a href="http://css3-tutorial-demo.blogspot.com/">Tutorial css3, Demo Tips & Trick</a></li>
        </ul>
    </li>
    <li class="level1-li" id="s2"><span>Suku</span>
        <ul class="time" begin="s2.mouseenter" end="s2.mouseleave" timeAction="display">
            <li><a href="#url">Papua</a></li>
            <li><a href="#url">Jawa</a></li>
            <li><a href="#url">Bugis</a></li>
            <li><a href="#url">Sunda</a></li>
            <li><a class="fly" href="#url">Anak Dalam</a></li>
            <li><a class="fly" href="#url">Badui</a></li>
            <li><a class="fly" href="#url">Batak</a></li>
        </ul>
    </li>
    <li class="level1-li" id="s3"><span>Tari Tradisional</span>
        <ul class="time" begin="s3.mouseenter" end="s3.mouseleave" timeAction="display">
            <li><a href="#url">Serimpi</a></li>
            <li><a href="#url">Pendet</a></li>
            <li><a href="#url">Jaipong</a></li>
            <li><a href="#url">Gondang Sambilan</a></li>
        </ul>
    </li>
    <li class="level1-li" id="s4"><span>Pulau</span>
        <ul class="time" begin="s4.mouseenter" end="s4.mouseleave" timeAction="display">
            <li><a href="#url">Sumatra</a></li>
            <li><a href="#url">Kalimantan</a></li>
            <li><a href="#url">Sulawesi</a></li>
            <li><a href="#url">Timor</a></li>
            <li><a href="#url">Nusakambangan</a></li>
            <li><a href="#url">Papua</a></li>
        </ul>
    </li>
    <li class="level1-li" id="a2"><a class="level1-a" href="http://gubhugreyot.blogspot.com">Best Blogger Tutorial</a></li>
</ul>
</div>