Bagaimanakah Saya Boleh Membuat Menu Jatuh Mendatar Menggunakan CSS sahaja?-tutorial css-php.cn

Bagaimanakah Saya Boleh Membuat Menu Jatuh Mendatar Menggunakan CSS sahaja?

Susan Sarandon

Lepaskan： 2024-12-06 15:22:15

asal

138 orang telah melayarinya

How Can I Create a Horizontal Dropdown Menu Using Only CSS?

Mencipta Menu Turun Mendatar Semata-mata dengan CSS

Menu lungsur mendatar menawarkan pengalaman yang mudah dinavigasi dengan membenarkan pengguna menuding pada menu utama item menu untuk mendedahkan sub-menu. Mencapai kesan ini semata-mata dengan CSS memerlukan beberapa kehebatan penggayaan.

Struktur HTML:

Mulakan dengan membuat senarai tidak tertib (<ul>) dengan

elemen untuk setiap item menu. Sub-menu diwakili oleh <ul> elemen.

Penggayaan CSS:

<ul>

Kedudukan: Tetapkan <ul> elemen untuk dipaparkan sebagai blok dan menambah terapung ke kiri pada

elemen untuk mencipta reka letak mendatar.

Keterlihatan Sub-Menu: Pada mulanya, sembunyikan sub-menu dengan menetapkan paparannya kepada tiada.

Gaya Item Menu:

<ul>

Tentukan warna latar belakang, padding, warna teks dan jidar untuk item menu.

Kesan Tuding:

<ul>

Tambahkan perubahan warna latar belakang pada tuding untuk item menu.

Nyahsembunyikan submenu pada tuding dengan menetapkan paparannya untuk menyekat dan meletakkannya mutlak.

Sub-Menu Responsif:

<ul>

Kurangkan saiz fon item submenu pada tuding untuk lebih mudah readablity.

Tambahkan perubahan warna latar belakang pada item sub-menu dihidupkan tuding.

Contoh Kod:

<ul>

Salin selepas log masuk

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

ul li {
  display: block;
  position: relative;
  float: left;
}

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;
}

Salin selepas log masuk

Demo Langsung:
[Tulen CSS Mendatar Dropdown Menu](http://jsfiddle.net/XPE3w/7/)

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