Belajar CSS : CSS Dropdown

Hallo teman-teman semua pada kesempatan kali ini saya akan menyampaikan materi tentang CSS Dropdown. Berikut materinya

CSS DROPDOWN

DROPDOWN DASAR
Membuat kotak dropdown yang akan muncul apabila saat kursor pengguna diatas elemen.
Contoh :

Untuk tampilan diatas anda dapat mengikuti script yang dibawah ini

Penjelasan :

• Kelas .dropdown penggunaan position:relative, ketika kita ingin isi dropdown untuk ditempatkan tepat di bawah tombol dropdown dapat menggunakan position:absolute. 
• Kelas .dropdown-content memegang konten dropdown yang sebenarnya. Jika Anda ingin lebar isi dropdown menjadi selebar tombol dropdown, mengatur width 100% dan overflow:auto mengaktifkan gulir pada layar kecil.
• Untuk perbatasan menggunakan properti box-shadow untuk membuat menu dropdown terlihat seperti "kartu". 
• :hover digunakan untuk menampilkan menu dropdown ketika pengguna menggerakkan kursor di atas tombol dropdown.

DROPDOWN MENU
Droppdown menu digunakan pengguna untuk memilih opsi dari daftar, sama halnya dengan contoh yang diatas tetapi pada dropdown menu ini ditambahkan dengan link.
Contoh :
 

Untuk tampilan diatas anda dapat mengikuti script yang dibawah ini

Jika anda menginginkan menu dropdown dari kanan atau dari kiri kekanan dapat menambahkan right: 0;

 
Referensi :
http://www.w3schools.com/css/css_dropdowns.asp

Sekian dan terimaksih