CSS下拉效果圖是網(wǎng)頁(yè)設(shè)計(jì)中常用的一種效果，能夠增加網(wǎng)頁(yè)的互動(dòng)性，同時(shí)也提升用戶體驗(yàn)。在下面的代碼示例中，我們將演示如何使用CSS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的下拉效果圖。

/* CSS樣式 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}

首先，我們需要設(shè)置一個(gè)包含下拉選項(xiàng)的容器。在這個(gè)容器上設(shè)置position:relative，以便為下拉選項(xiàng)設(shè)置絕對(duì)定位。在容器內(nèi)部創(chuàng)建一個(gè)用于顯示下拉選項(xiàng)的div元素，設(shè)置它的display:none;position:absolute;z-index:1。這個(gè)元素將被我們的hover事件調(diào)用，在用戶將鼠標(biāo)懸停在容器上時(shí)顯示。

下一步，使用:hover偽類選擇器來設(shè)置當(dāng)用戶將鼠標(biāo)懸停在容器上方時(shí)顯示dropdown-content。在.dropdown:hover .dropdown-content上設(shè)置display:block;，這樣下拉選項(xiàng)將在用戶懸停時(shí)顯示。

最后，我們需要在HTML中創(chuàng)建容器，并添加下拉選項(xiàng)。以下是完整的示例代碼：

下拉選項(xiàng)
選項(xiàng)一選項(xiàng)二選項(xiàng)三

在這個(gè)示例中，我們?cè)谝粋€(gè)p元素內(nèi)添加了“下拉選項(xiàng)”，在該元素下面添加了一個(gè)用于顯示選項(xiàng)的下拉菜單。您可以根據(jù)自己的需求更改HTML代碼和CSS樣式以實(shí)現(xiàn)自定義下拉效果圖。