Cara Membuat Menu Dropdown

Navigation Menus adalah sebuah alat yang kegunaanya untuk memudahkan Pengunjung untuk mengetahui isi dari web kita. Navigation Menus tidak jauh berbeda dengan daftar isi sebuah web, perbedaannya hanya jika daftar isi maka kita akan di suguhi semua daftar posting yang ada di web tersebut, sementara Navigation Menus kita akan di suguhi apa yang Admin web tersebut pasang pada Navigation Menus  seperti halaman, profil dan lain sebagainya. Untuk perjumpaan kali ini kita akan berbagi tutorial blogger yang membahas tentang Navigation Menus ya itu : Membuat Navigation Menus CSS3 dengan menu dropdown.
Membuat Navigation Menus CSS3 Bergaya Attractive Dark adalah sebuah navigasi bergaya Attractive Dark yang sangat menarik,:

TUTORIAL :

Mengingat akan banyaknya blogger yang kebingungan tentang cara pemasangan maka kali ini Saya akan memberikan Cara Membuat + Memasangnya di Blogger, silahkan ikuti langkah berikut untuk memulainya:

1. Login ke Akun Blogger Anda.
2. Pilih Template > Edit HTML.
3. Sekarang temukan kode ]]></b:skin>
4. Lalu letakkan kode berikut di atasnya

Copy Semua Script:

/* CSS3 Kode untuk menu dimulai di sini cerdasshare.com */ #cs_navs { background:#2c2c2c; margin:0 auto; height:50px; border-bottom:5px solid #cd2122; } #cs_navs .menu-alert{ float:left; padding:18px 0 0 10px ; font-style:italic; color:#FFF; } #top-menu-mob , #main-menu-mob{ display:none; } #cs_navs ul li { text-transform: uppercase; font-family: Oswald,arial,Georgia, serif; font-size:16px; position: relative; display: inline-block; float: left; border:1px solid #222222; border-width:0 0 0 1px; height:50px; } #cs_navs ul li:first-child, #cs_navs ul li:first-child a{border:0 none;} #cs_navs ul li:last-child a{border-right:0 none;} #cs_navs ul li a { display: inline-block; height: 50px; line-height: 50px; color: #ddd; padding:0 14px; text-shadow:0 1px 1px #000; border-left:1px solid #383838; } #cs_navs ul li a .sub-indicator{} #cs_navs ul li a:hover {} #cs_navs ul ul{ display: none; padding:0; position: absolute; top: 50px; width: 180px; z-index: 99999; float: left; background: #2d2d2d !important; -webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2); -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } #cs_navs ul ul li, #cs_navs ul ul li:first-child { background: none !important; z-index: 99999; min-width: 180px; border:0 none; border-bottom: 1px solid #222; border-top: 1px solid #383838; font-size:13px; height:auto; margin:0; } #cs_navs ul ul li:first-child ,#cs_navs ul li.current-menu-item ul li:first-child, #cs_navs ul li.current-menu-parent ul li:first-child,#cs_navs ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;} #cs_navs ul ul ul ,#cs_navs ul li.current-menu-item ul ul, #cs_navs ul li.current-menu-parent ul ul, #cs_navs ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; } #cs_navs ul.sub-menu a , #cs_navs ul ul li.current-menu-item a, #cs_navs ul ul li.current-menu-parent a, #cs_navs ul ul li.current-page-ancestor a{ border:0 none; background: none !important; height: auto !important; line-height: 1em; padding: 10px 10px; width: 160px; display: block !important; margin-right: 0 !important; z-index: 99999; color: #ccc !important; text-shadow:0 1px 1px #000 !important; } #cs_navs ul li.current-menu-item ul a, #cs_navs ul li.current-menu-parent ul a, #cs_navs ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;} #cs_navs ul li:hover > a, #cs_navs ul :hover > a { color: #FFF ;} #cs_navs ul ul li:hover > a, #cs_navs ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;} #cs_navs ul li:hover > ul {display: block;} #cs_navs ul li.current-menu-item, #cs_navs ul li.current-menu-parent, #cs_navs ul li.current-page-ancestor{ margin-top:0; height:50px; border-left:0 none !important; } #cs_navs ul li.current-menu-item ul.sub-menu a, #cs_navs ul li.current-menu-item ul.sub-menu a:hover, #cs_navs ul li.current-menu-parent ul.sub-menu a, #cs_navs ul li.current-menu-parent ul.sub-menu a:hover #cs_navs ul li.current-page-ancestor ul.sub-menu a, #cs_navs ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;} #cs_navs ul li.current-menu-item a, #cs_navs ul li.current-menu-item a:hover, #cs_navs ul li.current-menu-parent a, #cs_navs ul li.current-menu-parent a:hover, #cs_navs ul li.current-page-ancestor a, #cs_navs ul li.current-page-ancestor a:hover{ background:#cd2122; text-shadow:0 1px 1px #b43300; color:#FFF; height:50px; line-height:50px; border-left:0 none !important; } #cs_navs ul.sub-menu li.current-menu-item,#cs_navs ul.sub-menu li.current-menu-item a, #cs_navs li.current-menu-item ul.sub-menu a,#cs_navs ul.sub-menu li.current-menu-parent, #cs_navs ul.sub-menu li.current-menu-parent a,#cs_navs li.current-menu-parent ul.sub-menu a, #cs_navs ul.sub-menu li.current-page-ancestor,#cs_navs ul.sub-menu li.current-page-ancestor a, #cs_navs li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;} #cs_navs ul li.menu-item-home ul li a, #cs_navs ul ul li.menu-item-home a, #cs_navs ul li.menu-item-home ul li a:hover{ background-color:transparent !important; text-indent:0; background-image:none !important; height:auto !important; width:auto; }

5. Simpan template.
6. Sekarang pergi ke Tata Letak > Tambah Gadget.
7. Pilih Elemen HTML/JavaScript.
8. Copy kode berikut dan letakkan di dalamnya.

<nav id="cs_navs"> <div class="container"> <div class="main-menu"> <ul class="menu" id="menu-main"> <li><a href="http://www.cerdasshare.com/">Home</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Mode</a> <ul class="sub-menu"> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Modeling</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Kebanyakan Model</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Model BonBin</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Nggak ada Model</a></li> </ul> </li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Downloads</a> <ul class="sub-menu"> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Template</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Software</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Social</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Video Apa Aja</a></li> </ul> </li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Templates</a> <ul class="sub-menu"> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Authors</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Sitemap</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Tags</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Timeline</a></li> </ul> </li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Categori</a> <ul class="sub-menu"> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Blogger Trick</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">CSS Trick</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Berita Olahraga</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Berita Social Media</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Social Media</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Dan Lain-lain deh</a></li> </ul> </li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Layout</a> <ul class="sub-menu"> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Full Width</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Right Sidebar</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Left SIdebar</a></li> </ul> </li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Social Media</a> <ul class="sub-menu"> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Google Plus</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Facebook</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Twitter</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=6275404150592048725#">Pinterest</a></li> </ul> </li> </ul> </div> </div> </nav></div>

9. Simpan.

Keterangan: Silahkan Anda sesuaikan menu ini dengan menambahkan URL dan Nama Menu.