當一個 WordPress 網站的分類愈長愈多，傳統那種一層層往下掉的下拉選單就會開始卡關：使用者得把滑鼠懸在某個項目上不放，等第二層、第三層慢慢飛出來，稍微移開一點整排就消失。大型選單（mega menu）就是為了解決這個問題而生的，它讓你把大量連結一次攤平成多欄面板，圖片、商品分類、搜尋框都能塞進同一個下拉區塊裡。

在 WordPress 上做 mega menu，主流就是兩條路：裝外掛，或自己寫 CSS。這篇會把兩條路各自的做法、適合誰、要付出什麼代價講清楚，也會補上多數教學跳過的部分，包括 block 主題（FSE）下選單機制的改變、效能與無障礙的取捨，以及最關鍵的一題，你的站到底需不需要 mega menu。

大型選單（mega menu）到底是什麼

大型選單是一種把下拉內容攤成多欄面板的導覽形式，跟一般下拉選單最大的差別在於版面自由度。一般下拉只能直線往下列項目，mega menu 則能在一個寬面板裡放好幾欄標題、每欄底下再掛子連結，還能混入圖片、圖示、甚至商品縮圖或搜尋欄位。

結構上通常分三層。第一層是常駐在導覽列上的主選單項目，例如「商品」「教學」；第二層是滑鼠移上去後展開的分組標題，例如商品底下的「服飾」「3C」；第三層才是實際連結，例如服飾底下的「上衣」「外套」。理論上可以做到更多層，但實務上超過三層使用者就很難掃讀，導覽反而變負擔。

下面用示意排一下三層的關係，主選單在上、面板分欄在下。

你的網站到底需不需要 mega menu

先別急著裝外掛，多數小網站其實不需要 mega menu。判斷標準很簡單，看你的主選單項目底下要不要掛超過大約十條子連結、而且這些子連結還有明顯的分組關係。電商站賣好幾大類商品、線上課程平台有大量主題分類、媒體站欄目又多又雜，這些才是 mega menu 真正能發揮的場景。

反過來說，如果你的網站只有「首頁、關於、服務、部落格、聯絡」這種五到七個項目的扁平結構，硬塞一個 mega menu 只會讓導覽列看起來空蕩又突兀，還白白多載入一份外掛的資源。一個常被忽略的原則是，導覽列的價值在於幫使用者快速做決定，項目愈少、決定愈快；mega menu 是為「項目多到非分組不可」的情況準備的解法，不是為了好看。

判斷需求時，可以用三個問題自問：主選單某一項底下的連結，是不是多到一般下拉得捲動才看得完？這些連結是不是能清楚切成三到五個群組？使用者是不是經常要在不同分類之間跳轉？三個答案都偏「是」，再考慮 mega menu，否則普通下拉選單就夠用了。

用外掛做 mega menu 最快上手的方法

對不想碰程式碼的人來說，裝外掛是最快的路，其中最多人用的是 Max Mega Menu，免費版功能就足以做出多欄選單。安裝流程跟一般外掛一樣，在後台「外掛」、「安裝外掛」搜尋名稱、安裝並啟用即可。啟用後 WordPress 會多出一個 Mega Menu 的設定區。

啟用之後的設定大致分成三段。第一段是觸發方式，在選單位置設定裡勾選「Enabled」，再選擇觸發事件。Max Mega Menu 提供三種觸發行為，差異實際影響使用體驗：

• Hover Intent：滑鼠要在主選單上停留一小段時間才展開，用來避免使用者只是滑過就誤觸，是預設值也最穩。
• Hover：滑鼠一移上去立刻展開，反應最直覺，適合首頁或希望鼓勵探索的版面。
• Click：要點擊才展開，最適合觸控裝置，也能避免誤觸；選這個時記得到 Advanced 分頁設定點擊行為，決定第二次點擊是關閉選單還是直接跳連結。

第二段是外觀。在 Menu Themes 裡可以調整導覽列高度、背景色、字型、項目間距與邊框圓角，子選單面板的底色與內距也在這裡設定。實務上建議主選單和子選單用不同底色做出層次，但字型保持一致，才不會顯得雜亂。

第三段是塞內容。回到「外觀」、「選單」，把頁面、文章、分類、商品分類加進選單後，用拖曳把子項目縮排到對應的父項目底下，再對父項目點「Mega Menu」按鈕，把展開模式從預設的飛出式（flyout）改成 Standard Layout 或 Grid Layout。Grid Layout 允許你自由切欄列、把項目排進指定格子，還能透過小手機圖示把整欄整列「在手機上隱藏」，這是純 CSS 做法不容易做到的彈性。除了文字連結，也能透過 widget 在面板裡放圖片、搜尋框或商品縮圖。

除了 Max Mega Menu，市面上還有 QuadMenu（開源、免費版就支援多種選單型態）、WP Mega Menu、JetMenu 等選擇，後兩者偏向付費的進階版。挑選時與其比功能列表，不如先確認它在你目前的主題與行動裝置上能正常運作。

不裝外掛，純 CSS 自己刻 mega menu

如果你想完全掌控結構、不想多裝外掛，純 CSS 也能做出 mega menu，前提是你會改主題的樣式表，而且選單是傳統的 classic 主題（後面會談 block 主題的差別）。核心觀念是：mega menu 的多欄排版其實不需要改 WordPress 的選單 Walker，靠後台掛 CSS class 加上前台幾段 CSS 就能成立。

第一步在後台「外觀」、「選單」把所有第一層、第二層子頁面都加進來，用拖曳縮排排出層級，第一層子頁縮排一次、第二層縮排兩次。如果看不到「CSS 類別」欄位，點右上角「顯示選項」把它勾出來。接著給要做成 mega menu 的最上層項目掛上 has-mega-menu 這個 class，再給每個第一層子項目掛上 mega-menu-column，讓它們之後變成各自一欄。

第二步把結構用的 CSS 加進主題樣式表。下面這段示範用 CSS Grid 排多欄、並以 Flexbox 當不支援 Grid 時的後備，依螢幕寬度決定欄數：

@media screen and (min-width: 600px) {
  .has-mega-menu { position: static; }
  li.has-mega-menu .sub-menu {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
  }
  li.has-mega-menu:hover > .sub-menu {
    display: flex;          /* 不支援 Grid 的瀏覽器後備 */
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
  }
}
@media screen and (min-width: 992px) {
  li.has-mega-menu:hover > .sub-menu {
    grid-template-columns: repeat(auto-fit, minmax(33.333%, 1fr));
  }
}
@media screen and (min-width: 1200px) {
  li.has-mega-menu:hover > .sub-menu {
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
  }
}

這裡有兩個關鍵原理要理解，不然版會壞。其一，最上層項目要給 position: static，這樣絕對定位的子選單面板才會撐滿「第一個有 position: relative 的祖先容器」的寬度，所以記得在網站 header 或外層容器設 position: relative，面板才會橫跨整個版寬，而不是只跟主選單那一格一樣窄。其二，grid-template-columns: repeat(auto-fit, minmax(50%, 1fr)) 這行的意思是：螢幕大於 600px 時排兩欄、大於 992px 排三欄、大於 1200px 排四欄，斷點數字可以自己調。

接著補上每一欄的後備寬度，讓不支援 Grid 的瀏覽器也能用 Flexbox 排好：

@media screen and (min-width: 600px) {
  li.mega-menu-column {
    width: 100%;
    padding: 10px 25px;
    flex: 1 0 calc(50%);
  }
}
@media screen and (min-width: 992px) {
  li.mega-menu-column { flex: 1 0 calc(33.333%); }
}
@media screen and (min-width: 1200px) {
  li.mega-menu-column { flex: 1 0 calc(25%); }
}

至於連結的字型、顏色、間距怎麼配，因為每個主題差異很大，得自己依主題既有樣式微調。要在欄位裡放圖片也不難，在後台子項目的選單欄位直接填入圖片的 HTML，再用 .mega-menu-column img { display: block; } 讓圖片自己佔一行，不要跟文字擠在一起。

要提醒的是，純 CSS 做法的展開預設靠 :hover，這在桌機沒問題，但觸控裝置沒有 hover 概念，手機上往往要另外用點擊邏輯處理。多數教學會在小於 600px 的螢幕直接回退成原本的行動版選單樣式，不顯示 mega menu 面板，這是比較務實的做法。

block 主題（FSE）下選單機制的改變

很多 mega menu 教學是在 classic 主題的時代寫的，預設你能在「外觀」、「選單」裡操作，但如果你用的是 block 主題（也就是支援全站編輯 FSE 的主題，例如官方的 Twenty Twenty-Four 這類），情況不一樣。block 主題的導覽改由「導覽區塊」（Navigation block）在網站編輯器裡管理，傳統的「外觀」、「選單」頁面預設可能根本看不到。

這帶來兩個現實影響。第一，前面那套靠後台選單欄位掛 CSS class 的純 CSS 做法，在 block 主題上不一定有對應的欄位可填，你可能得改用區塊本身的設定或自訂 HTML 區塊來達成類似效果。第二，部分 mega menu 外掛為了相容 block 主題，會額外提供一個專屬區塊，或乾脆把「外觀」、「選單」頁面重新掛回來，讓你能沿用熟悉的操作流程。WordPress 官方也在逐步把區塊化的 mega menu 能力納入核心規劃，但目前要做出複雜的多欄面板，仍多半得靠外掛或自訂區塊。

實務建議是先確認自己用的是 classic 還是 block 主題，再決定路線。block 主題使用者若想省事，挑一個明確標示支援 FSE、有提供導覽區塊整合的外掛，會比硬刻 CSS 順手很多。

外掛與純 CSS 兩條路該怎麼選

兩條路沒有絕對的優劣，差別在你願意用什麼換什麼。下面用幾個實際會踩到的面向對照：

簡單歸納：不想碰程式碼、希望換主題也不會壞、需要手機端彈性與無障礙，選外掛。對版面有強烈的自訂需求、想把資源負載壓到最低、而且不打算頻繁換主題，純 CSS 比較划算。介於中間的人，可以先用外掛快速上線，之後若真的遇到外掛做不到的版面需求，再針對那一塊補自訂 CSS。

mega menu 對效能、無障礙與 SEO 的影響

mega menu 並非沒有代價，上線前最好先理解三個面向的取捨。

效能方面，外掛會額外載入自己的 CSS 與 JavaScript，而且 mega menu 面板裡若塞了大量圖片或商品縮圖，會增加初次載入的資源量。要把影響壓到最低，圖片務必先壓縮並設定合適尺寸，能用純文字連結就別硬塞圖片。一個設計良好的 mega menu 對網站速度的影響應該很有限，但「塞太多東西」往往才是真正拖慢的主因，跟它是外掛還是自刻關係反而沒那麼大。

無障礙是最容易被略過、卻直接影響可用性的一環。一個合格的 mega menu 應該能用鍵盤的 Tab 鍵逐項聚焦、用 Enter 或空白鍵展開、用 Esc 鍵收起，並帶有正確的 ARIA 標記讓螢幕報讀軟體能理解結構。實務上有些選單方案在這方面做得並不完整，缺少 ARIA、也無法純鍵盤操作。挑外掛時把「鍵盤可操作」「有 ARIA 支援」列為硬條件，自刻的話則別忘了補上這些，這也是純 CSS 做法最常漏掉的部分。

SEO 方面，重點在於選單裡的連結是否能被搜尋引擎正常抓取。用標準連結排出來的 mega menu，連結就是實打實的 <a>，爬蟲讀得到；真正要避免的是把整個選單做成完全靠 JavaScript 才生成、原始 HTML 裡看不到連結的形式。另外，導覽列連結會分散網站內部的連結權重，把所有頁面全塞進 mega menu 不見得對 SEO 有利，挑重要的、有分組邏輯的放進去，才是對使用者與搜尋引擎都友善的做法。

從需求判斷到上線，該怎麼開始

回到最開始那個問題：先確認你的站是不是真的需要 mega menu。子連結多、分組清楚、使用者常跨分類跳轉，這三點成立，它就值得做；否則普通下拉選單反而更俐落。

確認需求後，路線就好選了。不想寫程式、希望相容性與行動端彈性，直接裝 Max Mega Menu 這類外掛，照觸發方式、外觀、內容三段設定走一遍即可上線；想要完全掌控版面又能接受維護成本，classic 主題就用本文那套 has-mega-menu 加 Grid 的純 CSS 做法，block 主題則優先找有導覽區塊整合的外掛。無論走哪條路，上線前都記得做三件事：壓縮選單裡的圖片、用鍵盤實際操作一遍確認無障礙、在手機上把整個展開流程走過一次。把這三關過了，你的大型選單才算真正可用，而不只是看起來很厲害。