Membuat Menu Dropdown Simple (Pure CSS)

Membuat Menu Dropdown Simple (Pure CSS) - Kali ini saya akan share tentang tutorial Blogger, yaitu tentang "Membuat menu dropdown simple (pure CSS)" . Walaupun sebenernya ga begitu keren keren banget sih, cuma menu dropdown biasa dengan efek hover.. Mangkanya dibilang simple :p. Harap maklum ya kalau ga begitu keren-keren banget, kan saya bikinnya juga lagi ngiseng doang :P

Menu ini adalah menu yang saya pakai sekarang (di atas header)
Tapi, kalau kalian masih belum jelas dengan yang ada di blog ini, silahkan aja coba di lihat dulu demonya.. barangkali kalian jadi jelas dan minat :D

• Demo

Oh iya, sebelumnya kalian juga harus tau ya, menu ini tuh emang engga bagus bagus banget, tapi Pure CSS, yang artinya SEO Friendly masbro!

Yaudah, kalo kalian berminat, mari simak tutor dibawah ini...

Pertama, kalian ke Dashboard Blog kalian > Pilih Blog > Template > Edit HTML.

Kalo udah masuk ke menu Edit HTML, silahkan kalian copy code dibawah ini diatas ]]></b:skin>

 #navaroo {
    float: left;
    font: bold 12px Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    border-top: 1px solid #2b2e30;
    overflow: hidden;
}

#navaroo ul {
 margin:0;
 padding:0;
 list-style:none;
}

#navaroo ul li {
 float:left;
}

#navaroo ul li a {
    float: left;
 color:#d4d4d4;
   padding: 10px 20px;
 text-decoration:none;
    background:#3C4042;
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
 border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(0,0,0,0.2);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#navaroo ul li a:hover,
#navaroo ul li:hover > a {
    color: #252525;
    background:#3C4042;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#navaroo li ul a:hover, 
#navaroo ul li li:hover > a  {
    color: #2c2c2c;
   background: #9ABF7;
    border-bottom: 1px solid rgba(0,0,0,0.6);
    border-top: 1px lid #7BAED9;
    text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

#navaroo li ul {
     background:#3C4042;
     left: -999em;
     margin: 35px 0 0;
     position: absolute;
     width: 160px;
     z-index: 9999;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
     -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
     -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
     border: 1px solid rgba(0, 0, 0, 0.5);
}

#navaroo li:hover ul {
     left: auto;
 -webkit-transition:0.5s ease-in-out;
 -moz-transition:0.5s ease-in-out;
 -o-transition:0.5s ease-in-out;
}

#navaroo li ul a {
     background: none;
     border: 0 none;
     margin-right: 0;
     width: 120px;
     border-bottom: 1px solid transparent;
     border-top: 1px solid transparent;
}

#navaroo li li ul {
     margin: -1px 0 0 160px;
     visibility:hidden;
}

#navaroo li li:hover ul {
     visibility:visible;
} 

Kode diatas adalah kode CSS yang kita pakai... Selanjutnya kalau kalian sudah copy code diatas, silahkan kalian copy code HTML dibawah ini tepat dibawah code </head>

  <div id="navaroo">
<ul>
  <li><a href="http://tektanologi.blogspot.com/">Home</a></li>
<li><a href="#">Navaro 1</a></li>

<li><a href="#">Navaro 2</a></li>
<li><a href="#">Dropdown</a>
 <ul>
 <li><a href="#">Submenu 1</a></li>
 <li><a href="#">Submenu 2</a></li>
 <li><a href="#">Submenu 3</a></li>
 </ul>
</li>
<li><a href="#">Dropdown dengan Subsubmenu</a>
 <ul>
 <li><a href="#">Submenu 1</a></li>
 <li><a href="#">Submenu 2</a></li>
 <li><a href="#">Submenu 3</a>
 <ul>
  <li><a href="#">Subsubmenu 1</a></li>
  <li><a href="#">Subsubmenu 2</a></li>
  <li><a href="#">Subsubmenu 3</a></li>
  <li><a href="#">Subsubmenu 4</a></li>
  </ul>
 </li>
 </ul>
</li>
<li><a href="#">Navaro 3</a></li>
</ul>
</div>

Tugas kalian tinggal mengganti tulisan berwarna hijau dengan link yang kalian mau..

kalo udah tinggal kalian save dan lihat hasilnya.. kalo ada pertanyaan, tanya aja di kolom komentar ya :D 

Sekian, Wassalam