常用HTML二级下拉菜单导航栏代码-html教程-PHP中文网

纯html+css二级下拉菜单核心是：结构用ul嵌套ul、:hover必须li:hover ul触发、position需relative+absolute配合；避免div包裹、隔层嵌套、错误hover选择器及margin-top破坏悬停连续性。

常用html二级下拉菜单导航栏代码

直接能用、不依赖 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 必须是 li 的直接子元素，不能隔层
二级 ul 不能加 id 或独立类名干扰样式继承（除非你明确要单独控制）
所有 a 标签建议都加 href="#" 或真实路径，空 href 可能触发页面跳顶

CSS 中 `display: none` 和 `:hover` 必须配对作用于同级父子关系

关键规则只有一行：li:hover ul { display: block; }。很多人写成 .submenu:hover 或 li ul:hover，结果鼠标一移就闪退——因为二级菜单本身不是 li 的 hover 目标，而是它的子容器。

典型可靠写法：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

#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 的连续区域，鼠标经过间隙时菜单关闭