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

製作純 CSS 下拉式選單

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

HTML 結構

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

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

  範例HTML：

  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中文網其他相關文章！