Cara Membuat Menu DropDown Full Color Di Blog

Cara Membuat Menu DropDown Full Color Di Blog




Nah kali ini aku akan memberikan cara bagaimana memasang menu dropdown :). sekaligus memberikan sebuah menu drop down yang keren pada kalian :). nah apa sih fungsi dari menu drop down itu? fungsi dari menu dropdown itu yaitu untuk Memberi agar blog/website terlihat lebih bersih, cantik dan profesional dan juga dengan memasang menu dropdown label post yang berserakan pada widget bawaan blogger bisa diantisipasi dengan menu drop down ini :)..
untuk Memasangnya sangat gampang sekali :)


Step By Step :

  • Pertama tama bukalah Blogger Disini
  • kedua. jika sudah maka Buka "Template"
  • ketiga. Jika Sudah menemukan "Template" maka diharapkan untuk mengclick "Edit HTML"
  • Keempat. maka akan muncul Kotak kode HTML
  • kelima. click beberapa kode disana "jangan diapakan". lalu tekan CTRL + F lalu Cari Kode <header>
  • keenam.Copy Kode dibawah ini dan taruh tepat diatas kode <header>



 <!-- Start menu multi dropdown-->

<nav>

<ul class='menutop' id='mainmenu'>

  <li class='menutop'><a href='http://www.putuokaken.com' title='Home'>Home</a>

    </li>

    <li class='menutop'><a href='#' title='Article Categories'>Article Categories</a>

        <ul>

          <li><a href='http://www.putuokaken.com/search/label/How%20to?&amp;max-results=5'>How To</a>

            </li>

            <li><a href='#' title='Free Download'>Free Download</a>

                <ul>

                  <li><a href='http://www.putuokaken.com/search/label/App?&amp;max-results=5'>App</a>

                    </li>

                  <li><a href='http://www.putuokaken.com/search/label/Software?&amp;max-results=5'>Software</a>

                    </li>

                </ul>

            </li>

          <li><a href='http://www.putuokaken.com/search/label/Game?&amp;max-results=5'>Game</a>

            </li>

        </ul>

    </li>

    <li class='menutop'><a href='#' title='Other'>Other</a>

        <ul>

            <li><a href='http://www.putuokaken.com/2016/07/fix-corrupt-file.html'>Fix Corrupt File</a>

            </li>

            <li><a href='#' title='Nature'>Nature</a>

                <ul>

                    <li><a href='#'>Explanation</a>

                    </li>

                </ul>

            </li>

            <li><a href='#' title='About This'>About This</a>

            </li>

        </ul>

    </li>

<li class='menutop'><a href='#' title='Soon'>Soon</a>

                <ul>

                  

                    <li><a href='#'>Click Here</a>

                    </li>

                </ul>

            </li>

</ul>

    </nav>

<!-- End menu multi dropdown -->

Lalu.. Copykan salah satu kode dibawah ini tepat diatas kode  ]]></b:skin>  "cari juga menggunakan ctrl + F"







/* Menu Multi Dropdown */

ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#201816;width:100%}

ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#201816}

ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#5acb48; padding:0 7px 0}

ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}

ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}

ul#mainmenu li:hover {z-index:1;}

ul#mainmenu ul ul {position:absolute;left:100%;top:0;}

ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}

* html ul#mainmenu li a {display:inline-block;}

ul#mainmenu>li {margin:0;}

ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}

ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}

ul#mainmenu ul li {float:none;margin:7px 0 0;}

ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#bfedc4; text-decoration:none; text-shadow:0 1px 1px #36be39;}

ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}

ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}

ul#mainmenu ul span {background-image:none; padding-right:5px;}

ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#49bc3d;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #36be39;}

ul#mainmenu li.menutop>a {background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#89988d;}

ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#5acb48;color:#FFFFFF;}




/* Menu Multi Dropdown */

ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#201816;width:100%}

ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#201816}

ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#48cbc3; padding:0 7px 0}

ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}

ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}

ul#mainmenu li:hover {z-index:1;}

ul#mainmenu ul ul {position:absolute;left:100%;top:0;}

ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}

* html ul#mainmenu li a {display:inline-block;}

ul#mainmenu>li {margin:0;}

ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}

ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}

ul#mainmenu ul li {float:none;margin:7px 0 0;}

ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#bfede7; text-decoration:none; text-shadow:0 1px 1px #36beb3;}

ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}

ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}

ul#mainmenu ul span {background-image:none; padding-right:5px;}

ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#3dbcb8;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #36beb3;}

ul#mainmenu li.menutop>a {background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#899896;}

ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#48cbc3;color:#FFFFFF;}






/* Menu Multi Dropdown */

ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#201816;width:100%}

ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#201816}

ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#ad33cc; padding:0 7px 0}

ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}

ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}

ul#mainmenu li:hover {z-index:1;}

ul#mainmenu ul ul {position:absolute;left:100%;top:0;}

ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}

* html ul#mainmenu li a {display:inline-block;}

ul#mainmenu>li {margin:0;}

ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}

ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}

ul#mainmenu ul li {float:none;margin:7px 0 0;}

ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#dbbfed; text-decoration:none; text-shadow:0 1px 1px #9936be;}

ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}

ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}

ul#mainmenu ul span {background-image:none; padding-right:5px;}

ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#a33dbc;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #9936be;}

ul#mainmenu li.menutop>a {background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#948998;}

ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#ad33cc;color:#FFFFFF;}





/* Menu Multi Dropdown */

ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#201816;width:100%}

ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#201816}

ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#ccbc33; padding:0 7px 0}

ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}

ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}

ul#mainmenu li:hover {z-index:1;}

ul#mainmenu ul ul {position:absolute;left:100%;top:0;}

ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}

* html ul#mainmenu li a {display:inline-block;}

ul#mainmenu>li {margin:0;}

ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}

ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}

ul#mainmenu ul li {float:none;margin:7px 0 0;}

ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#edeabf; text-decoration:none; text-shadow:0 1px 1px #b9be36;}

ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}

ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}

ul#mainmenu ul span {background-image:none; padding-right:5px;}

ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#bcba3d;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #beb636;}

ul#mainmenu li.menutop>a {background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#989789;}

ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#ccbc33;color:#FFFFFF;}



Nah itu untuk template hitam :) keren bukan ? ;).. untuk yang template putih jangan khawatir.. dbawah ini merupakan template yang cocok untuk template putih :).





/* Menu Multi Dropdown */

ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#fcf7f7;width:100%}

ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#fcf7f7}

ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#5acb48; padding:0 7px 0}

ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}

ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}

ul#mainmenu li:hover {z-index:1;}

ul#mainmenu ul ul {position:absolute;left:100%;top:0;}

ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}

* html ul#mainmenu li a {display:inline-block;}

ul#mainmenu>li {margin:0;}

ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}

ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}

ul#mainmenu ul li {float:none;margin:7px 0 0;}

ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#bfedc4; text-decoration:none; text-shadow:0 1px 1px #36be39;}

ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}

ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}

ul#mainmenu ul span {background-image:none; padding-right:5px;}

ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#49bc3d;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #36be39;}

ul#mainmenu li.menutop>a {background-color:#fcf7f7; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#89988d;}

ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#5acb48;color:#FFFFFF;}





/* Menu Multi Dropdown */

ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#fcf7f7;width:100%}

ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#fcf7f7}

ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#48cbc3; padding:0 7px 0}

ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}

ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}

ul#mainmenu li:hover {z-index:1;}

ul#mainmenu ul ul {position:absolute;left:100%;top:0;}

ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}

* html ul#mainmenu li a {display:inline-block;}

ul#mainmenu>li {margin:0;}

ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}

ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}

ul#mainmenu ul li {float:none;margin:7px 0 0;}

ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#bfede7; text-decoration:none; text-shadow:0 1px 1px #36beb3;}

ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}

ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}

ul#mainmenu ul span {background-image:none; padding-right:5px;}

ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#3dbcb8;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #36beb3;}

ul#mainmenu li.menutop>a {background-color:#fcf7f7; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#899896;}

ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#48cbc3;color:#FFFFFF;}





/* Menu Multi Dropdown */

ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#fcf7f7;width:100%}

ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#fcf7f7}

ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#ad33cc; padding:0 7px 0}

ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}

ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}

ul#mainmenu li:hover {z-index:1;}

ul#mainmenu ul ul {position:absolute;left:100%;top:0;}

ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}

* html ul#mainmenu li a {display:inline-block;}

ul#mainmenu>li {margin:0;}

ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}

ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}

ul#mainmenu ul li {float:none;margin:7px 0 0;}

ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#dbbfed; text-decoration:none; text-shadow:0 1px 1px #9936be;}

ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}

ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}

ul#mainmenu ul span {background-image:none; padding-right:5px;}

ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#a33dbc;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #9936be;}

ul#mainmenu li.menutop>a {background-color:#fcf7f7; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#948998;}

ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#ad33cc;color:#FFFFFF;}





/* Menu Multi Dropdown */

ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#fcf7f7;width:100%}

ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#fcf7f7}

ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#ccbc33; padding:0 7px 0}

ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}

ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}

ul#mainmenu li:hover {z-index:1;}

ul#mainmenu ul ul {position:absolute;left:100%;top:0;}

ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}

* html ul#mainmenu li a {display:inline-block;}

ul#mainmenu>li {margin:0;}

ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}

ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}

ul#mainmenu ul li {float:none;margin:7px 0 0;}

ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#edeabf; text-decoration:none; text-shadow:0 1px 1px #b9be36;}

ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}

ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}

ul#mainmenu ul span {background-image:none; padding-right:5px;}

ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#bcba3d;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #beb636;}

ul#mainmenu li.menutop>a {background-color:#fcf7f7; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#989789;}

ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#ccbc33;color:#FFFFFF;}



Dibawah Ini ada beberapa Dropdown Full Color Dari aku :)







/* Menu Multi Dropdown */

ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#4fbc3e;width:100%}

ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#4fbc3e}

ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#5acb48; padding:0 7px 0}

ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}

ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}

ul#mainmenu li:hover {z-index:1;}

ul#mainmenu ul ul {position:absolute;left:100%;top:0;}

ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}

* html ul#mainmenu li a {display:inline-block;}

ul#mainmenu>li {margin:0;}

ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}

ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Shruti, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}

ul#mainmenu ul li {float:none;margin:7px 0 0;}

ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#bfedc4; text-decoration:none; text-shadow:0 1px 1px #36be39;}

ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}

ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}

ul#mainmenu ul span {background-image:none; padding-right:5px;}

ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#49bc3d;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #36be39;}

ul#mainmenu li.menutop>a {background-color:#4fbc3e; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#b8c3bb;}

ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#5acb48;color:#FFFFFF;}





/* Menu Multi Dropdown */

ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#3ebcbb;width:100%}

ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#3ebcbb}

ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#48c3cb; padding:0 7px 0}

ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}

ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}

ul#mainmenu li:hover {z-index:1;}

ul#mainmenu ul ul {position:absolute;left:100%;top:0;}

ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}

* html ul#mainmenu li a {display:inline-block;}

ul#mainmenu>li {margin:0;}

ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}

ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Shruti, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}

ul#mainmenu ul li {float:none;margin:7px 0 0;}

ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#bfedeb; text-decoration:none; text-shadow:0 1px 1px #36beb6;}

ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}

ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}

ul#mainmenu ul span {background-image:none; padding-right:5px;}

ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#3dbcba;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #36beb6;}

ul#mainmenu li.menutop>a {background-color:#3ebcbb; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#b7e8df;}

ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#48c3cb;color:#FFFFFF;}





/* Menu Multi Dropdown */

ul#mainmenu{margin:0 auto;list-style:none;padding:0;background-color:#bc3e4a;width:100%}

ul#mainmenu ul {margin:0 auto;list-style:none;padding:0;background-color:#bc3e4a}

ul#mainmenu ul {visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#cb4848; padding:0 7px 0}

ul#mainmenu li:hover>ul {visibility:visible;opacity:1;}

ul#mainmenu li {position:relative;display:block;white-space:nowrap;float:left;}

ul#mainmenu li:hover {z-index:1;}

ul#mainmenu ul ul {position:absolute;left:100%;top:0;}

ul#mainmenu {z-index:999;position:relative;display:inline-block;padding:0;}

* html ul#mainmenu li a {display:inline-block;}

ul#mainmenu>li {margin:0;}

ul#mainmenu a:active, ul#mainmenu a:focus {outline-style:none;}

ul#mainmenu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Shruti, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat;}

ul#mainmenu ul li {float:none;margin:7px 0 0;}

ul#mainmenu ul a {text-align:left; padding:5px 15px; background-color:transparent; color:#edbfbf; text-decoration:none; text-shadow:0 1px 1px #be3640;}

ul#mainmenu li:hover>a, ul#mainmenu li a.pressed {color:#FFFFFF;text-decoration:none;}

ul#mainmenu img {border:none;vertical-align:middle;margin-right:17px;}

ul#mainmenu ul span {background-image:none; padding-right:5px;}

ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed {background-color:#bc3d49;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #be3640;}

ul#mainmenu li.menutop>a {background-color:#bc3e4a; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#e8b7b7;}

ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed {background-color:#cb4848;color:#FFFFFF;}



dan yang terakhir.. ingat copykan salah satu code css diatas sesuai dengan selera kalian :) dan untuk code html pada <header> tersebut kalian boleh merubahnya sesuai dengan label yang kalian punya. dan jangan lupa juga untuk mengganti tulisan merah menjadi url blog kalian Tersebut :)...
.