下拉菜單是網(wǎng)頁(yè)中經(jīng)常使用的一種交互式組件，用于展示網(wǎng)頁(yè)的功能選項(xiàng)或?qū)Ш芥溄?。下面是一份關(guān)于如何通過(guò)CSS實(shí)現(xiàn)垂直方向下拉菜單的樣式的代碼：

<div class="dropdown">
<a href="#">菜單</a>
<div class="dropdown-content">
<a href="#">選項(xiàng)1</a>
<a href="#">選項(xiàng)2</a>
<a href="#">選項(xiàng)3</a>
</div>
</div>

這里使用了一個(gè)包含鏈接的div元素，并在其中嵌套了一個(gè)div元素，用來(lái)容納菜單選項(xiàng)。通過(guò)設(shè)置父元素的position屬性為relative，子元素的position屬性為absolute，可以讓子元素相對(duì)于父元素定位，并實(shí)現(xiàn)下拉的效果。

接下來(lái)，為了使鼠標(biāo)放在菜單上時(shí)下拉菜單可見，將使用:hover偽類。當(dāng)鼠標(biāo)懸停在菜單上時(shí)，菜單的下拉內(nèi)容將展示出來(lái)。下面是CSS代碼：

.dropdown:hover .dropdown-content {
display: block;
}

此外，為了使每個(gè)菜單選項(xiàng)的樣式看起來(lái)更舒適，設(shè)置了選項(xiàng)的文字顏色、背景色和內(nèi)邊距。下面是CSS代碼：

.dropdown-content a {
color: black;
text-decoration: none;
display: block;
padding: 6px 16px;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}

通過(guò)上述代碼，我們便可以輕松地實(shí)現(xiàn)一個(gè)美觀的下拉菜單。