CSS垂直下拉列表是一種常見的網(wǎng)頁UI設(shè)計(jì)，可以方便用戶進(jìn)行選擇和操作。下面介紹一種簡單的實(shí)現(xiàn)方式。

/* CSS代碼 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* HTML代碼 */
點(diǎn)擊下拉
選項(xiàng)1選項(xiàng)2選項(xiàng)3

上述代碼中，.dropdown為整個(gè)下拉列表的容器，.dropdown-content為選項(xiàng)列表的容器。默認(rèn)情況下，.dropdown-content的display屬性設(shè)為none，當(dāng)鼠標(biāo)懸停在.dropdown上時(shí)，.dropdown-content的display屬性變?yōu)閎lock，實(shí)現(xiàn)了下拉效果。

通過在.dropdown-content中添加鏈接，可以實(shí)現(xiàn)多個(gè)選項(xiàng)的下拉列表。需要注意的是，為了讓下拉列表在頂層顯示，所以設(shè)置.dropdown-content的z-index為1。