Cara Membuat Menu DropDown Full Color Di Blog - Nandea96
Artikel Terbaru
Loading...
Home Blog How to Cara Membuat Menu DropDown Full Color Di Blog

Monday, 8 July 2019

Cara Membuat Menu DropDown Full Color Di Blog

      ,    Comment   



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?&amp;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?&amp;max-results=5'>App</a>

                    </li>

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

                    </li>

                </ul>

            </li>

          <li><a href='http://www.nandea96.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.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 :)...
.


Share with your friends

Related Posts
Give us your opinion

Selamat Datang Di Website Nandea96
Mohon untuk selalu mencuci tangan dengan air bersih serta sabun setiap 15 menit sekali agar terhindar dari covid-19 dan penyakit lainnya seperti diare. selalu gunakan masker ketika berpergian kemanapun 😷. meskipun itu hanya berbelanja sekitar 0.1 km atau ke tetangga. hindari kontak fisik dan beri jarak sekitar 2 meter dari jarak tempat kita berdiri dengan seseorang agar tidak memunculkan klaster baru yang tidak di-inginkan.

-Terimakasih 🙏-
Done