利用css :hover 伪类实现响应式二级导航下拉菜单，核心在于将子菜单的显示状态绑定到父级元素的悬停事件上，并通过媒体查询适配移动端。具体做法是默认隐藏二级菜单（使用 display: none 或 opacity: 0），在父级 :hover 时将其设为可见，同时在屏幕宽度小于特定阈值（如768px）时，移除绝对定位并改为块级堆叠布局，使菜单在点击或悬停时垂直展开。
桌面端如何实现悬停展开与层级遮挡
在桌面端，二级菜单通常以绝对定位形式覆盖在主菜单下方，不占用文档流空间。通过设置父容器为 position: relative，子菜单为 position: absolute，可以精确控制其位置。当鼠标悬停在父级 li 上时，触发 :hover 状态，将子菜单从隐藏变为显示。
<nav class="navbar"><ul class="menu">
<li class="menu-item has-submenu">
<a href="#">产品</a>
<ul class="submenu">
<li><a href="#">功能 A</a></li>
<li><a href="#">功能 B</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
</ul></nav>
.navbar {
background: #333;
}
.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.menu-item {
position: relative;
}
.submenu {
position: absolute;
top: 100%;
left: 0;
background: #fff;
min-width: 150px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
display: none; /* 默认隐藏 */
flex-direction: column;
}
.menu-item:hover .submenu {
display: block; /* 悬停时显示 */
}
上述代码中，.submenu 初始状态为 display: none，当 .menu-item 被悬停时，.submenu 变为 display: block。这种结构确保了子菜单不会干扰其他元素的布局，且仅在需要时渲染。
移动端如何切换为垂直堆叠布局
在移动设备上，水平排列的导航栏往往无法容纳所有项，因此需要将布局转换为垂直堆叠。此时，二级菜单不再悬浮，而是作为父菜单项的一部分直接向下展开。通过媒体查询检测视口宽度，调整 flex-direction 和定位属性，使菜单在点击或悬停时垂直延伸。
@media (max-width: 768px) {
.menu {
flex-direction: column;
}
.menu-item {
width: 100%;
}
.submenu {
position: static; /* 移除绝对定位 */
display: none;
box-shadow: none;
background: #f9f9f9;
}
.menu-item:hover .submenu,
.menu-item.active .submenu {
display: block;
}
}
在移动端，.submenu 的 position 被重置为 static，使其占据正常文档流空间。这样，当用户悬停或点击父级菜单项时，子菜单会直接在下方展开，形成垂直列表。这种设计符合移动端用户的操作习惯，避免了小屏幕上难以点击的问题。
基于悬停条件触发的具体交互逻辑
在程序实现中，:hover 伪类的触发依赖于鼠标事件，但在触摸屏设备上，悬停行为可能不可靠或引发意外触发。因此，实际应用中常结合 JavaScript 添加点击切换逻辑，或在 CSS 中使用 :focus-within 增强可访问性。对于纯 CSS 方案，需确保 :hover 状态在触摸后能正确保持，或通过 touchstart 事件模拟悬停效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
