纯CSS横向导航悬停展开需满足：父li嵌套子ul、父li设position:relative、子ul用opacity+visibility+transition实现淡入，且仅对支持hover的设备启用@media(hover:hover)。
用 CSS :hover 触发子菜单显示，但必须满足结构前提
纯 CSS 实现横向导航的悬停展开，核心不是“怎么写 :hover”，而是 HTML 结构是否支持——<li> 必须嵌套子 <ul></ul>，且子菜单默认隐藏、定位脱离文档流。常见错误是把子菜单写在 <li> 外面，或用 display: none 却没配 position: absolute，导致布局错乱。
典型可靠结构如下：
<nav>
<ul class="nav">
<li><a href="#">首页</a></li>
<li class="has-dropdown">
<a href="#">产品</a>
<ul class="dropdown">
<li><a href="#">Web 端</a></li>
<li><a href="#">移动端</a></li>
</ul>
</li>
</ul>
</nav>
-
.has-dropdown需设position: relative，否则子.dropdown的absolute会相对 body 定位 - 子
<ul class="dropdown"></ul>初始必须用display: none（不能只靠visibility: hidden） -
:hover要写在父<li class="has-dropdown">上，不是<a></a>上——否则鼠标移向子菜单时会断开悬停态
display: none 和 opacity + visibility 的取舍
直接用 display: none / display: block 最简单，兼容性好（IE8+），但无法加过渡动画；想加淡入/滑动效果，就得换方案。
- 若要
transition，必须用opacity+visibility组合：visibility: hidden控制可点击性，opacity: 0控制透明度，再配合max-height或transform做高度/位移过渡 - 避免只用
opacity：透明后仍占布局空间，且子链接仍可被 focus 或点击 - 慎用
height: 0+overflow: hidden：子菜单高度不固定时难以精确设置transition的终点值
推荐做法（带淡入）：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
.dropdown {
position: absolute;
top: 100%;
left: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.has-dropdown:hover .dropdown {
opacity: 1;
visibility: visible;
}
横向导航里子菜单宽度撑不开、文字换行或溢出
这是最常被忽略的渲染细节：子菜单默认宽度由内容决定，但中文/长词/无空格字符串容易撑破容器或强制换行，破坏大菜单视觉一致性。
- 给
.dropdown设明确min-width（如min-width: 200px），避免窄于父项链接 - 用
white-space: nowrap防止菜单项内意外换行，再配合overflow: hidden+text-overflow: ellipsis处理超长文本 - 如果子菜单需多列（比如“产品”下分“前端”“后端”“运维”三栏），别硬塞
float或inline-block，改用display: grid或flex，并设grid-template-columns: repeat(3, 1fr) - 注意
box-sizing: border-box是否全局生效，否则 padding 会让实际宽度超出预期
移动端适配时悬停失效，但又不想立刻切 JS
触摸设备没有 :hover 概念，iOS Safari 和 Android Chrome 在首次点击时会触发一次 :hover（模拟），但之后就失效。纯 CSS 方案在此场景下本质不可靠。
- 如果项目要求“桌面端悬停、移动端点击展开”，最轻量解法是加一个
@media (hover: hover) and (pointer: fine)媒体查询，仅对支持悬停的设备启用:hover样式 - 对应移动端，保留
.has-dropdown的onclick或用click事件切换.is-open类，CSS 里写.is-open .dropdown { display: block; } - 不要试图用
touchstart+:hover混合处理——行为不一致，调试困难
真正麻烦的不是实现，而是菜单层级深了之后焦点管理、键盘导航（Tab / Esc）、屏幕阅读器语义这些点，往往上线后才暴露。
