首頁 > web前端 > css教學 > 如何製作純 CSS 下拉式選單?

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

Mary-Kate Olsen
發布: 2024-12-10 06:44:14
原創
787 人瀏覽過

How to Craft a Pure CSS Dropdown Menu?

製作純 CSS 下拉式選單

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

HTML 結構

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

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

    範例HTML:

    1

    <ul>

    登入後複製

    CSS 樣式

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

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

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

    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    作者最新文章
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板