纯HTML+CSS二级下拉菜单核心是：结构用ul嵌套ul、:hover必须li:hover ul触发、position需relative+absolute配合；避免div包裹、隔层嵌套、错误hover选择器及margin-top破坏悬停连续性。
直接能用、不依赖 JS 的纯 HTML+CSS 二级下拉菜单，核心就三点：结构嵌套正确、:hover 触发逻辑可靠、position 层级不崩。下面按真实开发中高频踩坑点组织。
HTML 结构必须用 ul 嵌套 ul，不能用 div
浏览器对 ul > li > ul 的语义和默认行为支持最稳定；用 div 包二级菜单容易导致 :hover 断开（鼠标移出一级 li 瞬间，二级菜单就消失）。常见错误写法：<li><a>产品</a><div class="submenu">...</div></li> —— 这个 div 悬浮时没有继承父级 li 的 hover 状态。
正确结构示例：
<ul id="nav">
<li><a href="#">首页</a></li>
<li>
<a href="#">产品</a>
<ul>
<li><a href="/web">Web 端</a></li>
<li><a href="/mobile">移动端</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
</ul>-
ul必须是li的直接子元素，不能隔层 - 二级
ul不能加id或独立类名干扰样式继承（除非你明确要单独控制） - 所有
a标签建议都加href="#"或真实路径，空href可能触发页面跳顶
CSS 中 display: none 和 :hover 必须配对作用于同级父子关系
关键规则只有一行：li:hover ul { display: block; }。很多人写成 .submenu:hover 或 li ul:hover，结果鼠标一移就闪退——因为二级菜单本身不是 li 的 hover 目标，而是它的子容器。
立即学习“前端免费学习笔记（深入）”；
典型可靠写法：
#nav li {
position: relative; /* 让子 ul 定位基准为这个 li */
}
#nav li ul {
position: absolute;
top: 100%; /* 紧贴一级菜单下方 */
left: 0;
display: none;
min-width: 160px;
background: #fff;
border: 1px solid #ddd;
}
#nav li:hover ul {
display: block; /* 注意：这里必须是 li:hover 触发，不是 ul:hover */
}- 一级
li必须设position: relative，否则absolute的二级菜单会相对于body定位，飘走 -
top: 100%比top: 40px更健壮，适配不同字体大小或 padding 变化 - 不要给二级
ul设margin-top，它会破坏:hover的连续区域，鼠标经过间隙时菜单关闭
IE11 及以下不支持 :hover 在非 a 元素上？用 a 包住整个一级菜单项
老版本 IE 对 li:hover 支持极差，但对 a:hover 是稳定的。解决办法：把一级菜单文字和二级菜单都包进 a 标签里（语义稍弱，但实操有效）。
结构微调：
<li>
<a href="#">
产品
<ul>
<li><a href="/web">Web 端</a></li>
<li><a href="/mobile">移动端</a></li>
</ul>
</a>
</li>对应 CSS 改为：a:hover ul { display: block; }，同时确保 a 设 display: block 占满 li 高度。
- 这种写法在现代浏览器也完全兼容，属于“降级友好”方案
- 注意二级
ul必须是a的直接子元素，否则老 IE 无法捕获 hover - 如果 SEO 要求严格，需评估此结构是否影响链接权重分配
真正麻烦的不是写出来，而是二级菜单在响应式断点里突然错位、或者手机端点击失效——那通常是因为媒体查询里漏写了 display: block 覆盖，或没处理触摸设备的 :focus 替代逻辑。这些得等真机测试时再动刀。
