如何僅使用 CSS 建立下拉式選單？

基於純 CSS 的下拉式選單建立

在 Web 開發中，下拉式選單是一種常見的 UI 元素，用於邏輯地組織和呈現選項。如果您想要一個不依賴外部框架或 JavaScript 的下拉式選單，純 CSS 可以提供合適的解決方案。

純CSS 下拉選單實作

建立一個純CSS - 基於下拉式選單，請依照下列步驟操作：

1. HTML 結構： 定義無序列表(<ul>)，每個列表項目(
2. )代表一個選單項目。在清單項目內，嵌套其他無序列表作為子選單。
3. 樣式： 使用 CSS 設定選單樣式。將 ul 設定為沒有項目符號、沒有邊距和水平對齊。將 li 元素置於內聯區塊中以進行水平對齊。
4. 下拉可見性： 若要切換子選單的可見性，請在清單項目上使用 :hover 偽類。將滑鼠懸停在清單項目上時，其子選單 (ul) 變為可見。
5. 菜單外觀： 使用CSS 屬性（如背景顏色、顏色和填充。

示例代碼

以下程式碼片段提供了一個純CSS下拉式選單的範例：

HTML:

<ul>

CSS：

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: inline-block;
  position: relative;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover {
  background: #617F8A;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

li:hover a {
  background: #617F8A;
}

li:hover li a:hover {
  background: #95A9B1;
}

CSS：

現場示範： [jsfiddle.net/XPE3w/7/](http://jsfiddle.net/XPE3w/7/)

以上是如何僅使用 CSS 建立下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！