Membuat style sheet

Jika Anda ingin menu masuk dalam file HTML yang berdiri sendiri, Anda harus membuat spasi di antara tag dan di mana kode CSS akan pergi. Tulis yang berikut di file Anda.

Ruang antara dua label ini adalah style sheet Anda. Jika Anda menggunakan file CSS terpisah, tambahkan tempat berikut ini di tag "head":

Kemudian buat file bernama "style.css", yang akan menjadi style sheet Anda. Simpan style sheet di direktori yang sama dengan file HTML utama.

Membuat menu

Anda harus membuat label yang berisi agar menu masuk ke dalamnya. Tambahkan hal-hal berikut ke halaman HTML Anda di lokasi tempat Anda ingin menunya:

Maka Anda harus menentukan pembagi menu. Tambahkan kode berikut ke style sheet Anda:

menu {

lebar: 200px; }

Tambahkan ke entri ini setiap gaya CSS lain yang Anda ingin pembagi miliki; misalnya, warna latar belakang, batas, atau ukuran yang berbeda.

Markup HTML

Tambahkan kode untuk menu. Menu akan menggunakan daftar yang tidak diurutkan:

. Tambahkan kode berikut di antara label untuk menu Anda.
• Item menu 1
  • Sub-menu Element 1
  • Sub-menu Element 2

Perhatikan bahwa label

dari sub-menu ada di antara label
• dan
untuk "Element 1 dari menu". Ini memberitahu browser bahwa sub-menu terdapat di bawah item menu itu. Sesuaikan kode di atas untuk mewakili menu Anda sendiri, tambahkan URL Anda sendiri dan sub-menu tambahan jika perlu

Gaya CSS

Pada titik ini, menu akan muncul tetapi sub-menu akan selalu ditampilkan. Anda hanya perlu menggunakan atribut "display" untuk menyembunyikan dan membuka sub-menu. Tambahkan yang berikut ke style sheet Anda:

menu li {position: relative;}

menu ul ul {

posisi: absolut; atas: 0; kiri: 100%; lebar: 100px; } div # menu ul ul {display: none;} div # menu ul li: hover ul {display: block;}

Simpan semua file. Menu pull-down Anda sudah siap.

Referensi

• Tanfa.co.uk: Tutorial Menu CSS Pop-Out (tutorial menu drop-down CSS)

Lebih banyak artikel

• Cara membuat menu drop-down horizontal dalam HTML
• Cara menghapus semua gaya CSS untuk DIV individual
• Cara mengurangi ruang antar baris dalam HTML
• Cara menyisipkan dua gambar secara horizontal dengan HTML
• Cara mengganti CSS dalam kelas DIV
• Cara memasang DIV di bagian bawah halaman
• Cara membuat garis vertikal yang memisahkan teks HTML dari suatu gambar