首页 > 文章 > 前端

html怎么制作垂直菜单_html竖向导航栏样式设置

时间：2026-05-04 17:45:39 296浏览收藏

垂直菜单的 HTML 结构怎么写才不容易错

垂直菜单最稳妥的结构是用

包裹一个无序列表

，每个菜单项用

，链接用。别用
堆砌，否则语义弱、屏幕阅读器不友好，后期加下拉也难扩展。

常见错误是把直接塞进
里不套
，或者用
（带序号，纯属干扰视觉）。

首页 是推荐起点

如果需要图标或箭头，用伪元素 ::before 或内联 SVG，别额外加增加嵌套深度

当前激活项统一加 aria-current="page" 属性，比只靠 class 更可靠

纯 CSS 实现竖向排列的关键样式

垂直菜单本质是让
块级堆叠，不是靠 flex-direction: column 或 grid —— 那些在老浏览器里容易掉样式，且对简单场景属于过度设计。

核心就三行：

nav ul { list-style: none; padding: 0; margin: 0; } nav li { display: block; } nav a { display: block; padding: 12px 20px; text-decoration: none; }

这样写兼容性好，display: block 确保点击热区完整，text-decoration: none 必须显式清除下划线，否则默认样式会破坏整体感。

别用 float: left + clear: both 模拟垂直——这是 2010 年的老办法，易塌陷、难居中

悬停背景色建议用 background-color 而非 border-left，后者在高缩放下有渲染毛刺

字体大小统一用 rem，避免父容器 font-size 变动时子项错位

鼠标悬停和选中状态的样式陷阱

很多人写 a:hover 后发现点击后样式消失，是因为没处理 a:active 和 a:focus，更关键的是漏了 a[aria-current="page"] 这个语义化选中态。

正确顺序必须是：:link → :visited → :hover → :active → :focus → [aria-current]，否则低版本 Safari 会覆盖掉当前页样式。

a:hover 和 a:focus 的背景色建议保持一致，键盘用户 Tab 导航时体验才连贯

不要给 a:focus 加 outline: none，除非同时提供等效的 box-shadow 替代方案

移动端需补 @media (hover: none) and (pointer: coarse) 逻辑，避免 touch 设备误触发 hover

响应式折叠菜单要不要 JS？

纯 CSS 能做基础收起（用 details/summary），但真要支持多级展开、动画、键盘操作（如按空格展开）、焦点管理，JS 不可避免。

轻量方案推荐监听 click 切换 aria-expanded 和 hidden 属性，再配 CSS 控制显示。别用 display: none 硬切——它会让屏幕阅读器完全忽略内容。

折叠按钮必须用

展开动画优先用 max-height + overflow: hidden，比 height 更安全（高度不确定时不会撑破容器）

移动端竖向菜单常被误认为“底部导航”，记得在
上加 role="navigation" 显式声明

垂直菜单最难的不是排列，而是状态同步：URL 变化时菜单是否高亮、刷新后是否保持展开、键盘操作能否闭环。这些点一漏，PC 和移动用户都会卡住。
理论要掌握，实操不能落！以上关于《html怎么制作垂直菜单_html竖向导航栏样式设置》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！