能实现，但必须用 position: relative + position: absolute 配合 :hover；侧边栏容器需设 relative 作为定位上下文，每个分类项也要 relative 才能让子菜单紧贴下方，且子菜单必须是直接子元素、无间隙、用 display: none 切换。
能实现，但必须用 position: relative + position: absolute 配合 :hover，且侧边栏本身不能直接用 absolute 悬浮在页面任意位置——它得嵌在容器里，否则 hover 区域会断裂。
为什么不能直接给侧边栏设 position: absolute 然后 top/left 定位？
因为 :hover 依赖 DOM 结构连续性和视觉热区连贯性。如果侧边栏是孤立的 absolute 元素（比如父容器没设 position: relative），它的子菜单就可能相对于视口定位，导致鼠标移向子菜单时经过空白区域，触发 mouseleave，菜单瞬间收起。
- 侧边栏容器（如
.sidebar）必须设position: relative，作为所有absolute子元素的定位上下文 - 每个分类项（
.category-item）也要设position: relative，才能让它的下拉层精准贴住下方 - 若侧边栏用
absolute脱离文档流又没包裹容器，主内容区会“上移”，布局错乱
:hover 触发的子菜单为何一移就消失？
不是代码写错了，是结构或间隙出了问题。纯 CSS 下拉菜单没有“保持打开”状态，全靠鼠标是否持续覆盖在有效区域内。
- 子菜单（
.submenu）必须是触发项（如.category-item）的**直接子元素**，不能隔一层div或用兄弟选择器（+/~）勉强拼接 - 触发项和子菜单之间**不能有 margin、gap 或 border 造成的视觉空隙**——哪怕 1px，鼠标经过就会断 hover
- 子菜单用
display: none切换最稳妥；别用visibility: hidden+opacity: 0，否则键盘 Tab 仍能聚焦到隐藏项，且占位可能撑开父容器 - 移动端无 hover，这类菜单默认不可用；加
@media (hover: hover)只是声明能力，不解决触摸交互
垂直侧边栏中子菜单如何精确定位不偏移？
常见偏移来自字体渲染差异、缩放、或父级宽高未显式约束。绝对定位本身没问题，但参照系要稳。
- 子菜单统一用
top: 100%+left: 0，确保紧贴父项底部左对齐 - 父项（
.category-item）需设固定高度或min-height，避免文字换行导致高度变化，拖动子菜单错位 - 若侧边栏整体需要滚动，给容器设
overflow-y: auto，但确保容器本身有明确高度（如height: calc(100vh - 80px)），否则absolute子元素可能溢出不可见 - 避免在子菜单上设
transform: translateY()做动画——它会创建新层叠上下文，干扰z-index和 hover 区域判断
实际结构与关键样式怎么写？
以下是最小可行结构，去掉冗余，只保留 hover 连续性必需的部分：
<div class="sidebar">
<div class="category-item">
<a href="#">女装</a>
<ul class="submenu">
<li><a href="#">连衣裙</a></li>
<li><a href="#">衬衫</a></li>
</ul>
</div>
<div class="category-item">
<a href="#">男装</a>
<ul class="submenu">
<li><a href="#">T恤</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
</div>
</div>
对应 CSS：
.sidebar {
position: relative;
width: 220px;
height: calc(100vh - 80px);
overflow-y: auto;
}
.category-item {
position: relative;
}
.category-item > a {
display: block;
padding: 12px 16px;
}
.submenu {
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #eee;
min-width: 200px;
display: none;
margin: 0;
padding: 0;
}
.category-item:hover .submenu {
display: block;
}
.submenu li a {
display: block;
padding: 10px 16px;
}
真正容易被忽略的是：侧边栏容器的高度必须可计算，且子菜单的 top: 100% 依赖父项高度稳定——一旦父项因内容变化高度浮动，子菜单就飘了。这不是 bug，是 absolute 定位机制决定的边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
