Bagaimanakah Saya Boleh Mencipta Menu Jatuh Bawah Hanya Menggunakan CSS?

Penciptaan Menu Jatuh Turun Berasaskan CSS Tulen

Dalam pembangunan web, menu lungsur ialah elemen UI biasa yang digunakan untuk mengatur dan mempersembahkan pilihan secara logik. Jika anda inginkan menu lungsur turun tanpa bergantung pada rangka kerja luaran atau JavaScript, CSS tulen boleh memberikan penyelesaian yang sesuai.

Pelaksanaan Menu Turun CSS Tulen

Untuk membina CSS semata-mata -berasaskan menu lungsur turun, ikut langkah berikut:

1. HTML Struktur: Tentukan senarai tidak tertib (
   ), dengan setiap item senarai (
   • ) mewakili item menu. Di dalam item senarai, sarang senarai lain yang tidak tersusun untuk submenu.
   • Penggayaan: Gunakan CSS untuk menggayakan menu. Tetapkan ul supaya tiada peluru, tiada jidar dan penjajaran mendatar. Letakkan elemen li blok dalam baris untuk penjajaran mendatar.
   • Keterlihatan Jatuh Turun: Untuk menogol keterlihatan submenu, gunakan kelas pseudo :hover pada item senarai. Apabila item senarai dilegar di atas, submenu (ul)nya akan kelihatan.
   • Penampilan Menu: Sesuaikan penampilan item menu, submenu dan pautan menggunakan sifat CSS seperti warna latar belakang, warna dan pelapik.

Contoh Kod

Coretan kod berikut menyediakan contoh menu lungsur turun berasaskan CSS tulen:

HTML:

CSS:

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: inline-block;
  position: relative;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover {
  background: #617F8A;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

li:hover a {
  background: #617F8A;
}

li:hover li a:hover {
  background: #95A9B1;
}

Demo Langsung: [jsfiddle.net/XPE3w/7/](http://jsfiddle.net/XPE3w/7/)

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Menu Jatuh Bawah Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!