Stylish CSS3 Menu Bar With Mega Drop Down List

Demo

 

Kali ini ane akan ngposting toturial tentang  Stylish CSS3 Menu Bar With Mega Drop Down List oke langsung aja kita ke tutorial ya! Cekidot!!

 1. Masuk ke akun blogger dan klik drop down.
 2. lalu pilih Template
 3. Kemudian Klik Edit HTML
 4. lalu cari kode  ]]></b:skin>
 5. untuk mempermudah pencarian tekan CTRL + F
 6. Paste Kode Di bawah ini tepat sebelum kode ]]></b:skin>
  

 ul.dropdown li a {
 display: block;
 padding: 3px 8px;
}
ul.dropdown li {
 padding: 0;
}

ul.dropdown li.dir {
 padding: 7px 20px 7px 12px;
}
ul.dropdown ul li.dir {
 padding-right: 15px;
}
ul.dropdown ul a {
 padding: 4px 5px 4px 12px;
}
ul.dropdown ul a:hover {
 padding: 3px 5px 3px 11px;
 border: solid 1px #ddd;
 background-color: #eee;
 font-weight: bold;
}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}
ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}
ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
ul.dropdown ul li {
 float: none;
}
ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}
ul.dropdown li:hover > ul {
 visibility: visible;
}
ul.dropdown {
 font: bold 12px Arial, Helvetica, sans-serif;
}
    ul.dropdown li {
     padding: 3px 12px;
     background-color: #000;
     color: #fff;
    }

    ul.dropdown li.hover,
    ul.dropdown li:hover {
     background-color: #222;
    }
    ul.dropdown a:link,
    ul.dropdown a:visited { color: #fff; text-decoration: none; }
    ul.dropdown a:hover { color: #fff; text-decoration: underline; }
    ul.dropdown a:active { color: #fff; }

    /* -- level mark -- */

    ul.dropdown ul {
     margin-left: -6px;
     width: 170px;
     padding-bottom: 9px;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEs6BQ44Juno8gx-ZLiMYbiEY53yWl4zyZyok9tpsd1BdykhHjn9d7Q7i9GtqcIx-UvEDIkfHFdnCEbpNVIP7mnINtihAp1RVSwgtYL1r0bU3Vwzi590bG4eTc5IV3dq7e3-ZV4aFyfyg/s1600/dropdown_pane.png) 0 100% no-repeat;
     color: #000;
     font-size: 11px;
     font-weight: normal;
    }

        ul.dropdown ul li {
         background-color: transparent;
         color: #000;
        }

        ul.dropdown ul li.hover,
        ul.dropdown ul li:hover {
         background-color: transparent;
        }

        ul.dropdown ul li.empty {
         padding: 12px 12px 7px !important;
         font-weight: bold;
        }

        ul.dropdown ul a:link,
        ul.dropdown ul a:visited { color: #000; }
        ul.dropdown ul a:hover { color: #000; text-decoration: none; }
        ul.dropdown ul a:active { color: #000; }

        /* -- level mark -- */

        ul.dropdown ul ul {
         display: none;
        }
/* -- Supporting class `dir` -- */
ul.dropdown *.dir {
 padding-right: 12px;
 background-image: none;
 background-position: 100% 50%;
 background-repeat: no-repeat;
} 

7. Klik Simpan Template
8. lalu sobat pergi ke Tata Letak --> Tambah Gadget --> HTML Javascript
9. Paste Kode di bawah ini :

 <ul class="dropdown dropdown-horizontal" id="nav">
<li><a href="Your Link URL">Home</a></li>
<li><a class="dir" href="Your Link URL">Solutions</a>
        <ul>
<li class="empty">Industries</li>
<li><a href="Your Link URL">Broadcast and media</a></li>
<li><a href="Your Link URL">Education</a></li>
<li><a href="Your Link URL">Financial services</a></li>
<li><a href="Your Link URL">Government</a></li>
<li><a href="Your Link URL">Life sciences</a></li>
<li><a href="Your Link URL">Manufacturing</a></li>
<li class="empty">Solutions</li>
<li><a href="Your Link URL">Consumer photo</a></li>
<li><a href="Your Link URL">Mobile</a></li>
<li><a href="Your Link URL">Print publishing</a></li>
<li><a href="Your Link URL">Pro photography</a></li>
<li><a href="Your Link URL">Professional video</a></li>
<li><a href="Your Link URL">Applications</a></li>
<li><a href="Your Link URL">Communication</a></li>
<li><a href="Your Link URL">Learning</a></li>
<li><a href="Your Link URL">Web conferencing</a></li>
<li><a href="Your Link URL">Web publishing</a></li>
<li><a href="Your Link URL">All solutions ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://www.bloggertrix.com/">Products</a>
        <ul>
<li><a href="Your Link URL">Acrobat Connect Pro</a></li>
<li><a href="Your Link URL">Acrobat family</a></li>
<li><a href="Your Link URL">Adobe AIR</a></li>
<li><a href="Your Link URL">After Effects</a></li>
<li><a href="Your Link URL">ColdFusion</a></li>
<li><a href="Your Link URL">Creative Suite family</a></li>
<li><a href="Your Link URL">Dreamweaver</a></li>
<li><a href="Your Link URL">Flash</a></li>
<li><a href="Your Link URL">Flex</a></li>
<li><a href="Your Link URL">Illustrator</a></li>
<li><a href="Your Link URL">InDesign</a></li>
<li><a href="Your Link URL">Enterprise Suite</a></li>
<li><a href="Your Link URL">Mobile products</a></li>
<li><a href="Your Link URL">Photoshop family</a></li>
<li><a href="Your Link URL">Adobe Premiere Pro</a></li>
<li><a href="Your Link URL">Scene7 OnDemand</a></li>
<li><a href="Your Link URL">All products ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://www.bloggertrix.com/">Support</a>
        <ul>
<li><a href="Your Link URL">Support home</a></li>
<li><a href="Your Link URL">Customer Service</a></li>
<li><a href="Your Link URL">Knowledgebase</a></li>
<li><a href="Your Link URL">Books</a></li>
<li><a href="Your Link URL">Training</a></li>
<li><a href="Your Link URL">Support programs</a></li>
<li><a href="Your Link URL">Forums</a></li>
<li><a href="Your Link URL">Documentation</a></li>
<li><a href="Your Link URL">Updates</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://www.bloggertrix.com/">Communities</a>
        <ul>
<li class="empty">By user</li>
<li><a href="Your Link URL">Designers</a></li>
<li><a href="Your Link URL">Developers</a></li>
<li><a href="Your Link URL">Educators</a></li>
<li><a href="Your Link URL">Partners</a></li>
<li class="empty">By resource</li>
<li><a href="Your Link URL">Adobe Labs</a></li>
<li><a href="Your Link URL">Adobe TV</a></li>
<li><a href="Your Link URL">Forums</a></li>
<li><a href="Your Link URL">Exchange</a></li>
<li><a href="Your Link URL">Blogs</a></li>
<li><a href="Your Link URL">Experience Design</a></li>
</ul>
</li>
<li><a class="dir" href="http://www.bloggertrix.com/">Company</a>
        <ul>
<li><a href="Your Link URL">About Adobe</a></li>
<li><a href="Your Link URL">Press</a></li>
<li><a href="Your Link URL">Investor Relations</a></li>
<li><a href="Your Link URL">Corporate Affairs</a></li>
<li><a href="Your Link URL">Careers</a></li>
<li><a href="Your Link URL">Showcase</a></li>
<li><a href="Your Link URL">Events</a></li>
<li><a href="Your Link URL">Contact Adobe</a></li>
<li><a href="Your Link URL">Become an affiliate</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://www.bloggertrix.com/">Downloads</a>
        <ul>
<li><a href="Your Link URL">Downloads home</a></li>
<li><a href="Your Link URL">Trial downloads</a></li>
<li><a href="Your Link URL">Updates</a></li>
<li><a href="Your Link URL">Exchange</a></li>
<li class="empty">Readers and Players</li>
<li><a href="Your Link URL">Get Adobe Reader</a></li>
<li><a href="Your Link URL">Get Flash Player</a></li>
<li><a href="Your Link URL">Get Adobe AIR</a></li>
<li><a href="Your Link URL">Get Shockwave Player</a></li>
<li><a href="Your Link URL">Get Media Player</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://www.bloggertrix.com/">Store</a>
        <ul>
<li><a href="Your Link URL">Store home</a></li>
<li><a href="Your Link URL">Software</a></li>
<li><a href="Your Link URL">Fonts</a></li>
<li><a href="Your Link URL">Books</a></li>
<li><a href="Your Link URL">Support programs</a></li>
<li><a href="Your Link URL">Your account</a></li>
<li><a href="Your Link URL">Volume licensing</a></li>
<li><a href="Your Link URL">Store offers</a></li>
<li><a href="Your Link URL">Other ways to buy ›</a></li>
</ul>
</li>
</ul> 

10. Kemudian Simpan
     Selesai..
    Semoga Bermanfaat...

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM