CSS下拉菜单布局偏移问题：仅用ul>li结构无JS实现

嘿，我完全懂你遇到的这些痛点——要做下拉效果，还得死守单层级ul > li的语义化结构，不能用嵌套列表，还不能碰JS，最烦的是之前的方法一hover就把下面的内容挤得乱跑。别担心，我给你调整一下代码，完美搞定这些问题！

问题根源分析 #

你原来用display: none/block控制显示隐藏，这会让元素直接从文档流里“消失/出现”，浏览器必然会重新计算布局，导致下方内容偏移。要避免这个，核心是让下拉内容脱离文档流，这样它的显示隐藏就不会影响其他元素的布局。

解决方案代码 #

直接替换你的CSS部分就行，完全贴合你的结构要求：

/* container for stats */
.caniuse-stats { 
  font-size: 90%; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 4px; /* 给浏览器列之间加个间距，布局更清爽 */
}
.caniuse-stats a[href] { 
  margin-left: 5px; 
  white-space: nowrap; 
  padding: 4px; 
}
/* wraps each browser into a separate column */
.caniuse-browser { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  position: relative; /* 关键：建立定位上下文，让下拉内容相对于它定位 */
}
/* a browser version */
.caniuse-cell { 
  width: 100px; /* 固定宽度，保证下拉内容和主按钮宽度一致 */
  padding: 4px; 
  background: #eee; /* default, for unknown support */ 
  margin: 1px 0; /* 只留垂直间距，避免水平错位 */
  text-align: center;
}
.caniuse-cell:hover { 
  font-weight: bold; 
}
/* 处理下拉的旧版本样式 */
.caniuse-cell:nth-child(n + 2) { 
  position: absolute; /* 脱离文档流，不占用空间，彻底避免布局重排 */
  top: 100%; /* 精准定位在第一个li的正下方 */
  left: 0;
  opacity: 0; /* 初始透明 */
  visibility: hidden; /* 初始不可见，辅助opacity避免点击穿透问题 */
  transition: opacity 0.2s ease, visibility 0.2s ease; /* 顺滑过渡效果 */
}
/* hover时显示下拉内容 */
.caniuse-browser:hover .caniuse-cell:nth-child(n + 2) { 
  opacity: 1;
  visibility: visible;
}
/* supports */
.caniuse-cell.y { background: #8bc34a; }
/* no support */
.caniuse-cell.n { background: #e53935; }
/* partial/limited support */
.caniuse-cell.d, .caniuse-cell.a { background: #ffc107; }
/* behind flag */
.caniuse-cell.x { background: #2196f3; }

关键调整点说明 #

• 给父容器加position: relative：.caniuse-browser设置相对定位后，里面的绝对定位子元素会以它为基准，不会乱跑。
• 绝对定位下拉内容：把第2个及以后的li设置为position: absolute，直接脱离文档流，不管显示还是隐藏，都不会影响下方元素的布局，彻底解决重排问题。
• 用opacity+visibility代替display：既能实现顺滑的过渡效果，又不会像display: none那样完全从文档流移除元素，配合绝对定位，hover交互更流畅。
• 固定宽度：给.caniuse-cell设置固定宽度，保证下拉的每个版本按钮和主按钮宽度一致，布局更整齐。

这样改完之后，你的单层级ul > li结构完全符合语义化要求，不需要JS，hover下拉时下方内容也不会偏移，完美满足你的所有需求！

内容的提问来源于stack exchange，提问作者Sid Vishnoi