NAVIGATION
超级菜单Mega Menu
鼠标悬停导航项时展开一整块多栏面板，可以同时塞下几十个链接和一张促销卡。
效果预览
核心功能
◈自动化流程
◉数据看板
⬒权限管理
解决方案
▤电商团队
▥内容团队
▦开发团队
新功能已上线
AI 助手正式开放 →
NEW
AI 助手正式开放 →
适合用在哪
产品线多、功能复杂的 SaaS；需要一次性展示全部分类的电商与文档站。
容易踩的坑
- 纯 hover 触发且无延迟，鼠标斜穿到面板时经过相邻项导致菜单误切换。
- 触屏设备没有 hover，必须支持点击展开，并能用 Esc 关闭、Tab 进入面板。
- 单个面板塞进 40 个以上链接却无分组标题，用户扫视成本反而高于普通下拉。
设计提示词 · Prompt
超级菜单（Mega Menu）：悬停导航项后展开一整块横向面板，宽度接近容器满宽（或固定 720-960px），与导航项左对齐。面板内部用 3-4 栏 CSS Grid 分栏——每栏顶部一个 11px 大写灰色小标题，下面是带图标 + 名称 + 一行说明的条目列表（图标用 32px 圆角方块，悬停时背景变浅色）。最右侧一栏放一张品牌渐变的推广卡（标题 + 一行副文 + 箭头）。面板本体：白底、16px 圆角、1px 描边、大范围柔光投影，展开动画 180ms 从上方 8px 位移淡入。
Mega Menu: hovering a nav item expands a full horizontal panel, close to the full container width (or fixed at 720-960px), left-aligned with the nav item. Inside, split into 3-4 columns with CSS Grid — each column topped by an 11px uppercase gray subheading, followed by a list of items with icon + name + one-line description (icons in 32px rounded squares whose background lightens on hover). The rightmost column holds a brand-gradient promo card (title + one line of subcopy + arrow). Panel itself: white background, 16px radius, 1px stroke, large soft shadow; the open animation is a 180ms fade-in with an 8px offset from above.
常见搭配
同一页面里经常和「超级菜单」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-mega">
<div class="d-mega__bar">
<span style="font-weight:750">◆ Nova</span>
<span class="is-on">产品 ▾</span><span>方案</span><span>资源</span>
<span class="d-spacer"></span>
<button class="d-btn d-btn--p d-btn--sm">开始</button>
</div>
<div class="d-mega__panel">
<div class="d-mega__col">
<span class="d-mega__cap">核心功能</span>
<div class="d-mega__item"><span class="d-ico d-ico--b">◈</span>自动化流程</div>
<div class="d-mega__item"><span class="d-ico d-ico--b">◉</span>数据看板</div>
<div class="d-mega__item"><span class="d-ico d-ico--b">⬒</span>权限管理</div>
</div>
<div class="d-mega__col">
<span class="d-mega__cap">解决方案</span>
<div class="d-mega__item"><span class="d-ico d-ico--g">▤</span>电商团队</div>
<div class="d-mega__item"><span class="d-ico d-ico--g">▥</span>内容团队</div>
<div class="d-mega__item"><span class="d-ico d-ico--g">▦</span>开发团队</div>
</div>
<div class="d-mega__promo">
<div><b>新功能已上线</b><br><span>AI 助手正式开放 →</span></div>
<span class="d-badge" style="background:rgba(255,255,255,.22);color:#fff;align-self:flex-start">NEW</span>
</div>
</div>
</div>