在網(wǎng)頁(yè)設(shè)計(jì)中，下拉菜單（Drop-down Menu）是常用的交互元素之一。下面我們就來(lái)介紹如何使用CSS編寫一個(gè)簡(jiǎn)單的下拉菜單。
/* CSS */
.dropdown {
position: relative;
}
.dropdown-list {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-list {
display: block;
}首先，我們先為下拉菜單的容器(.dropdown)設(shè)置相對(duì)定位，為其下屬的列表(.dropdown-list)設(shè)置絕對(duì)定位，并把其z-index屬性值設(shè)為1，使其覆蓋其他元素。
接著，我們將.dropdown-list的display屬性設(shè)為none，即初始狀態(tài)下不顯示。當(dāng).hover時(shí)，使用CSS偽類:hover為.dropdown設(shè)置樣式，使其下屬的列表顯示出來(lái)（display:block）。
接下來(lái)是HTML。我們需要在.dropdown中創(chuàng)建一個(gè)可點(diǎn)擊的按鈕或文本，用于觸發(fā)下拉菜單。在按鈕或文本之下創(chuàng)建一個(gè)ul標(biāo)簽，在其中添加菜單選項(xiàng)。
- 選項(xiàng)1
- 選項(xiàng)2
- 選項(xiàng)3
以上就是使用CSS編寫一個(gè)簡(jiǎn)單的下拉菜單的方法。我們可以根據(jù)實(shí)際需求進(jìn)行樣式調(diào)整和功能擴(kuò)展，比如加入動(dòng)畫效果、使用JavaScript控制菜單行為等等。