Bagaimana untuk Mencipta Menu Dropdown Mendatar CSS Tulen?-tutorial css-php.cn

Bagaimana untuk Mencipta Menu Dropdown Mendatar CSS Tulen?

Mary-Kate Olsen

Lepaskan： 2024-12-11 08:04:09

asal

653 orang telah melayarinya

How to Create a Pure CSS Horizontal Dropdown Menu?

Buat Menu Turun Mendatar CSS Tulen

Memerlukan menu lungsur turun mendatar yang sesuai dan serasi pelayar? Berikut ialah panduan untuk membantu anda mencapainya dengan CSS semata-mata.

1. Struktur HTML

Buat <ul> struktur untuk mewakili hierarki menu anda:

<ul>

Salin selepas log masuk

2. Penggayaan CSS

Tambahkan peraturan CSS untuk menggayakan menu dan mengawal tingkah lakunya:

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

Lihat dalam Tindakan

Lawati ikuti demo untuk mengalami menu lungsur turun CSS tulen:

http://jsfiddle.net/XPE3w/7/

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Menu Dropdown Mendatar CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!