如何製作純 CSS 下拉式選單？

製作純 CSS 下拉式選單

在網頁設計領域，建立無縫、使用者友善的導覽選單的能力是最重要的。在各種選單樣式中，下拉式選單因其優雅地組織和顯示導覽選項的能力而脫穎而出。本文將深入探討創建純 CSS 下拉選單的複雜藝術，該菜單不僅實用，而且在視覺上也很吸引人。

HTML 結構

HTML 結構基本的下拉式選單相對簡單。我們從一個無序列表 (

<ul>) 開始，它用作選單項目的容器。在清單中，每個選單項目都由一個清單項目 (

) 表示。

範例HTML：

<ul>

CSS 樣式

為了將功能性下拉選單結構轉換為功能性下拉選單，我們使用以下CSS樣式：

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

ul li {
  display: block;
  position: relative;
  float: left;
}

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;
}

工作原理

初始樣式設定選單的整體外觀，包括字體、邊距和填充。 li 元素的預設顯示屬性設定為 block，允許它們水平顯示。下拉子選單最初透過將其顯示屬性設為 none 來隱藏。

懸停狀態定義為使用position:absolute顯示子選單，將它們對齊在其父項下方。此外，子選單的 li 和 a 元素繼承樣式以保持一致的外觀。將滑鼠懸停在子選單項目上會觸發背景顏色的進一步變化。

結論

建立純 CSS 下拉式選單需要仔細的 HTML 結構和深思熟慮的 CSS 樣式。透過掌握這些技術，網頁設計師可以釋放優雅且實用的導航選單的力量，從而增強使用者體驗並展示他們的創造力。

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