MEMBUAT DROPDOWN SEDERHANA

Pertama-tama kita buat dulu dokumen HTML savenya bebas yang penting (dot)HTML. ketikan script dibawah ini

ini hasilnya dari script HTML tadi

setelah itu kita buat file dengan style.css usahakan file css ini dengan html yang diatas di 1 folderin.

dan ini hasilnya dari css diatas :

untuk membuat efek dropdown menu, tag <ul> yang berada dalam <li> harus kita sembunyikan dulu . gunakan property display: none

dan ini hasilnya dari css diatas :

berikutnya atur penampilan menu utama

dan ini hasil dari css diatas :

agar lebih menarik, buat css rule untuk kondisi menu hover.

dan ini hasil dari css diatas :

kemudian kita buat kondisi hover untuk menampilkan tag <ul> yang berada dalam <li> aliasa mengatur tampilan submenu.

dan ini hasil dari css diatas :

hampir sama dengan langkah di atas, namun kali ini tag yang di atur adalah <li>

dan ini hasil dari css diatas:

selanjutnya atu agar setiap tag <a> yang berada dalam <li>, berubah warna backgroundnya saat kondisi hover

dan ini hasil terakhir dari contoh diatas :

One thought on “MEMBUAT DROPDOWN SEDERHANA

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s