Bagaimana untuk Mencipta Menu Jatuh Mendatar Hanya Menggunakan CSS?

Mencipta Menu Jatuh Turun CSS Tulen

Menu lungsur turun mendatar boleh dibuat dengan mudah menggunakan CSS tulen, memastikan keserasian merentas pelbagai penyemak imbas. Inilah cara untuk mencapainya ini:

HTML:

<ul>

CSS:

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

Demo:

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

Oleh menggunakan peraturan CSS ini pada kod HTML anda, anda boleh membuat menu lungsur turun serasi merentas penyemak imbas berfungsi sepenuhnya menggunakan CSS tulen.

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