悬停菜单内容超出页面求助：position属性引发布局异常

嘿，我来帮你搞定这个菜单的问题！先拆解下你遇到的两个核心问题：悬停时文本“Example”左移，还有悬浮内容容易超出页面范围。咱们一步步来解决。

问题根源分析 #

1. 文本左移：你给div设置position: relative时，它会占据正常文档流的空间。因为你的ul是右浮动的，div的出现会挤压ul的可用宽度，导致里面的“Example”文本被迫左移。
2. 内容溢出页面：relative定位是相对于元素自身的原始位置偏移，当ul在页面右侧时，div自然会往右边延伸，很容易超出页面边界。

解决方案 #

调整div的定位方式，同时优化位置控制，就能一次性解决两个问题：

ul { 
  float: right; 
  position: relative; 
  /* 可选：加个内边距，让菜单和悬浮内容之间有间距 */
  padding: 0 10px;
}
div { 
  display: none; 
  background-color: red; 
  position: absolute; /* 改成absolute，脱离文档流 */
  right: 0; /* 让div对齐ul的右侧，避免溢出页面 */
  width: 200px; 
  /* 可选：加个z-index确保悬浮菜单在最上层 */
  z-index: 100;
}
ul:hover div { 
  display: block; 
}

对应的HTML结构保持不变：

<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>

修改说明 #

• position: absolute：让div脱离正常文档流，不再占据空间，也就不会挤压ul导致“Example”左移了。
• right: 0：让div以ul的右侧为基准定位，这样即使ul在页面最右边，div也会向左展开，不会超出页面边界。
• 保留ul的position: relative：这是关键，它会成为absolute定位的div的参考容器，确保悬浮菜单跟着ul的位置走。

如果需要调整悬浮菜单的位置，比如想让它稍微往左偏移一点，只需要修改right的值（比如right: 10px）就行，灵活度很高。

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