Cara Membuat Menu Bar Responsive Scroll Dropdown

FREECRACK31 - Masih "ngulik" tentang macam-macam menu bar pada blogger, kali ini saya akan membagikan cara bagaimana membuat menu bar atau menu navigasi dropdown responsive dengan tambahan efek scroll tanpa harus menekan dan menggulir mouse.

Menu bar yang satu ini memang bisa dikategorikan ke dalam menu bar yang elegan, pasalnya penggunaan efek pada dropdown sudah tidak perlu memerlukan suatu tindakan yang harus kalian lakukan seperti menggulir atau menekan kursor mouse.

Langkah - Langkah Membuat Menubar Scroll Dropdown

• Masuk ke akun blogger kalian
• Pilih menu template atau theme, kemudian cari kode ]]>

.

Letakan kode dibawah ini diatas kode ]]>

 .

tidak ada {
  lebar: 750px;
  margin: 1em auto;
}

yang {
  margin: 0px;
  padding: 0px;
  daftar-gaya: tidak ada;
}

ul.dropdown { 
  posisi: relatif; 
  lebar: 100%; 
}

ul.dropdown ke { 
  font-weight: bold; 
  float: kiri; 
  lebar: 180px; 
  posisi: relatif;
  latar belakang: # ecf0f1;
}

ul.dropdown a: hover { 
  warna: # 000; 
}

ul.dropdown li a { 
  tampilan: blok; 
  padding: 20px 8px;
  warna: # 34495e; 
  posisi: relatif; 
  z-index: 2000; 
  text-align: center;
  hiasan teks: tidak ada;
  font-weight: 300;
}

ul.dropdown li a: hover,
ul.dropdown li a.hover { 
  latar belakang: # 3498db;
  posisi: relatif;
  warna: #fff;
}


ul.dropdown ul { 
 layar: tidak ada;
 posisi: absolut; 
  atas: 0; 
  kiri: 0; 
  lebar: 180px; 
  z-index: 1000;
}

ul.dropdown ul li { 
  font-weight: normal; 
  latar belakang: # f6f6f6; 
  warna: # 000; 
  border-bottom: 1px solid #ccc; 
}

ul.dropdown ul li a { 
  tampilan: blok; 
  warna: # 34495e! penting;
  latar belakang: #eee; penting;
} 

ul.dropdown ul li a: hover {
  tampilan: blok; 
  latar belakang: # 3498db! penting;
  warna: #fff! penting;
} 

.drop> a {
  posisi: relatif;
}

.drop> a: setelah {
  isi: "";
  posisi: absolut;
  kanan: 10px;
  atas: 40%;
  border-left: 5px solid transparent;
  border-top: 5px solid # 333;
  border-right: 5px solid transparent;
  z-index: 999;
}

.drop> a: hover: setelah {
  isi: "";
   border-left: 5px solid transparent;
  border-top: 5px solid #fff;
  border-right: 5px solid transparent;
}

• Langkah seterusnya, kalian cari kode 

, dan letakkan kode berikut ditas kode  .