CSS overflow 属性高级应用：实现垂直滚动与水平内容溢出共存

<div class="scroll-container">
  <ul class="item-list">
    <li class="list-item">
      <span class="item-content">列表项内容 1</span>
      <div class="overflow-menu">
        <span>菜单项 A</span>
        <span>菜单项 B</span>
        <span>菜单项 C</span>
      </div>
    </li>
    <li class="list-item">
      <span class="item-content">列表项内容 2 - 这是一个更长的内容，以模拟需要溢出的情况。</span>
      <div class="overflow-menu">
        <span>菜单项 D</span>
        <span>菜单项 E</span>
      </div>
    </li>
    <li class="list-item">
      <span class="item-content">列表项内容 3</span>
      <div class="overflow-menu">
        <span>菜单项 F</span>
      </div>
    </li>
    <!-- 更多列表项，以填充垂直滚动区域 -->
    <li class="list-item">
      <span class="item-content">列表项内容 4</span>
      <div class="overflow-menu">
        <span>菜单项 G</span>
      </div>
    </li>
    <li class="list-item">
      <span class="item-content">列表项内容 5</span>
      <div class="overflow-menu">
        <span>菜单项 H</span>
      </div>
    </li>
    <li class="list-item">
      <span class="item-content">列表项内容 6</span>
      <div class="overflow-menu">
        <span>菜单项 I</span>
      </div>
    </li>
  </ul>
</div>

.scroll-container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  overflow-y: scroll; /* 垂直滚动 */
  position: relative; /* 关键：为内部绝对定位元素提供定位上下文 */
  padding: 10px;
}

.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-item {
  position: relative; /* 关键：为内部的 overflow-menu 提供定位上下文 */
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
  white-space: nowrap; /* 防止内容自动换行，以便更好地演示溢出 */
}

.list-item:last-child {
  border-bottom: none;
}

.item-content {
  display: inline-block;
  margin-right: 10px;
}

.overflow-menu {
  position: absolute; /* 关键：使菜单脱离文档流 */
  left: 100%; /* 定位到 list-item 的右侧 */
  top: 0;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  white-space: nowrap;
  z-index: 10; /* 确保菜单在其他内容之上 */
  display: none; /* 默认隐藏 */
  transform: translateX(5px); /* 微调位置，与列表项有少量间距 */
}

.list-item:hover .overflow-menu {
  display: block; /* 悬停时显示 */
}

/* 仅为美观添加一些滚动条样式 */
.scroll-container::-webkit-scrollbar {
  width: 8px;
}

.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}