Bagaimana untuk Mencipta Menu Dropdown Mendatar CSS Tulen?

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

struktur untuk mewakili hierarki menu anda:

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

Lihat dalam Tindakan

Lawati ikuti demo untuk mengalami menu lungsur turun CSS tulen:

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

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!