Nah kali ini Dea 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.nandea96.com' title='Home'>Home</a>
</li>
<li class='menutop'><a href='#' title='Article Categories'>Article Categories</a>
<ul>
<li><a href='http://www.nandea96.com/search/label/How%20to?&max-results=5'>How To</a>
</li>
<li><a href='#' title='Free Download'>Free Download</a>
<ul>
<li><a href='http://www.nandea96.com/search/label/App?&max-results=5'>App</a>
</li>
<li><a href='http://www.nandea96.com/search/label/Software?&max-results=5'>Software</a>
</li>
</ul>
</li>
<li><a href='http://www.nandea96.com/search/label/Game?&max-results=5'>Game</a>
</li>
</ul>
</li>
<li class='menutop'><a href='#' title='Other'>Other</a>
<ul>
<li><a href='http://www.nandea96.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 Dea :)
/* 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 :)....