如何实现下拉菜单默认左对齐、空间不足时右对齐的纯CSS方案？

需求说明 #

默认状态下，下拉菜单显示在触发元素右侧（优先覆盖后续元素）；当容器（示例中为ul）空间不足时，下拉菜单自动贴靠容器右侧，核心逻辑为：

if (触发元素左侧偏移 + 下拉菜单宽度 > 容器总宽度) 贴靠右侧 else 保持在触发元素右侧

要求纯CSS实现，支持元素宽度随内容动态变化。

解决方案 #

完整代码 #

div {
  border: 1px solid black;
}

ul {
  display: flex;
  position: relative; /* 作为下拉菜单的全局定位容器 */
  padding: 0;
  list-style: none;
  border: 1px solid black;
  resize: horizontal; /* 可拖动调整宽度，方便测试效果 */
  overflow: hidden;
  min-width: 100px;
}

li {
  display: flex;
  position: relative; /* 作为触发元素的定位参考 */
  white-space: nowrap; /* 防止触发元素换行，保证定位逻辑准确 */
}

.item {
  padding: 0.4em;
  background-color: #f99;
}

.dropdown {
  position: absolute;
  left: 100%; /* 默认显示在触发元素右侧 */
  right: 0; /* 容器空间不足时，强制贴靠容器右侧 */
  z-index: 1;
  padding: 0.4em;
  opacity: 0.7;
  background-color: #2f6f44;
  width: fit-content; /* 宽度随内容自动调整 */
  margin-left: auto; /* 空间不足时，下拉菜单从右往左排列 */
}

<ul>
  <li>
    <div class="item">First</div>
  </li>
  <li>
    <div class="item">Second</div>
    <div class="dropdown">Dropdown Content</div>
  </li>
  <li>
    <div class="item">Third</div>
  </li>
  <li>
    <div class="item">Fourth</div>
  </li>
</ul>

原理说明 #

1. 定位层级设置：ul设为相对定位，作为下拉菜单的全局定位基准；每个li设为相对定位，确保下拉菜单默认以触发元素为参照点。
2. 自适应对齐逻辑：
   • 容器空间充足时：left: 100%让下拉菜单固定在触发元素右侧，自然覆盖后续元素。
   • 容器空间不足时：right: 0强制下拉菜单贴靠容器右边缘，结合width: fit-content和margin-left: auto，下拉菜单会从右往左自适应内容宽度，避免超出容器范围。
3. 动态宽度适配：width: fit-content保证下拉菜单宽度随内容变化，li的white-space: nowrap防止触发元素换行，确保定位计算的准确性。

测试方式 #

给ul添加了resize: horizontal属性，可拖动容器边缘调整宽度，直观观察下拉菜单在不同容器宽度下的自适应切换效果。

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