CSS下拉菜單是網(wǎng)頁中一種經(jīng)常用到的UI元素，它能夠讓用戶輕松地直接獲取網(wǎng)站的導(dǎo)航信息和功能。導(dǎo)航欄CSS下拉菜單分為兩類，一種是通過CSS實現(xiàn)下拉菜單，一種是 jQuery實現(xiàn)下拉菜單。

/* CSS下拉菜單 */
nav {
display: inline-block;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
float: left;
position: relative;
}
nav a {
display: block;
padding: 0 10px;
line-height: 30px;
text-decoration: none;
color: #333;
}
nav ul ul {
display: none;
position: absolute;
top: 30px;
}
nav ul li:hover >ul {
display: inherit;
}
nav ul ul li {
width: 200px;
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 200px;
}
nav li:hover {
background: #4b545f;
}
nav ul li:hover >a {
color: #fff;
}
nav ul li:hover >ul a {
color: #fff;
}
nav a:focus {
background-color: #333;
color: #fff;
}
nav a:active {
background-color: #333;
color: #fff;
}

上述代碼中，我們定義了一個導(dǎo)航欄，里面存在一個ul列表，每個列表項都是一個li，在li中包含了a標(biāo)簽，對應(yīng)了下拉菜單中的導(dǎo)航鏈接。ul列表中每個li中還可以包含另一個ul列表，這就是我們下拉的菜單內(nèi)容。

當(dāng)鼠標(biāo)懸浮在導(dǎo)航欄li上時，我們利用:hover偽類顯示下一級的ul列表。

相較于jQuery實現(xiàn)下拉菜單，這種純CSS實現(xiàn)下拉菜單的優(yōu)點是更加簡單，兼容性更好且代碼初始加載速度更快。不過相應(yīng)的，CSS實現(xiàn)下拉菜單的樣式和交互效果也相對簡單。