如何用CSS让导航菜单的子菜单显示在水平滚动条上方？

问题出在两个核心点：一是滚动容器的overflow-x: auto会默认裁剪垂直方向的溢出内容，二是水平滚动条的层级高于子菜单，导致被遮挡。以下是具体修复步骤：

1. 调整滚动容器的布局与溢出行为 #

修改.custom-container样式，移除不必要的z-index，添加底部内边距给滚动条预留空间，避免子菜单和滚动条重叠：

.custom-container {
  width: 100%;
  overflow-x: auto;
  position: relative;
  padding-bottom: 10px; /* 给水平滚动条留出空间 */
}

2. 修正导航列表的溢出设置 #

原代码中overflow-y: none是无效值，改为overflow-y: visible，确保导航列表不会裁剪垂直方向的子菜单：

ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  overflow-y: visible; /* 允许垂直方向溢出内容显示 */
  padding: 0;
  background-color: #333;
  white-space: nowrap;
  position: relative;
  z-index: 2; /* 让导航列表层级高于滚动条 */
}

3. 调整子菜单的定位与层级 #

将子菜单的top值改为100%（靠容器的padding-bottom补偿间距），并设置足够高的z-index确保它在最上层：

.submenu {
  display: none;
  position: absolute;
  background-color: #333;
  width: 200px;
  z-index: 999; /* 确保子菜单在所有元素上方 */
  left: 0;
  top: 100%; /* 紧贴父菜单底部 */
}

完整修复后的代码 #

<html>
  <head>
    <style>
      .custom-container {
        width: 100%;
        overflow-x: auto;
        position: relative;
        padding-bottom: 10px;
      }

      ul {
        display: flex;
        list-style-type: none;
        margin: 0;
        overflow-y: visible;
        padding: 0;
        background-color: #333;
        white-space: nowrap;
        position: relative;
        z-index: 2;
      }

      li {
        flex: 0 0 auto;
        background-color: #333;
        position: relative;
      }

      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      li a:hover:not(.active) {
        background-color: #111;
      }

      .active {
        background-color: #04aa6d;
      }

      .submenu {
        display: none;
        position: absolute;
        background-color: #333;
        width: 200px;
        z-index: 999;
        left: 0;
        top: 100%;
      }

      li:hover .submenu {
        display: block;
      }

      .submenu a {
        padding: 8px 16px;
      }
      ::-webkit-scrollbar {
        width: 5px;
      }

      ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgb(255 255 255);
        border-radius: 5px;
      }

      ::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #00ce9d;
      }

      ::-webkit-scrollbar:horizontal {
        height: 5px;
        background-color: white;
      }
      ::-webkit-scrollbar-thumb:horizontal {
        border-radius: 5px;
        background: #00ce9d;
      }
    </style>
  </head>
  <body>
    <div class="custom-container">
      <ul>
        <li>
          <a href="#home">Home</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#news">News</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#contact">Contact</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#home">Home</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#news">News</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#home">Home</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#news">News</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#home">Home</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#news">News</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#contact">Contact</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#home">Home</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#news">News</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#contact">Contact</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#home">Home</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#news">News</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#contact">Contact</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#home">Home</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#news">News</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
        <li>
          <a href="#contact">Contact</a>
          <div class="submenu">
            <a href="#">Submenu Item 1</a>
            <a href="#">Submenu Item 2</a>
            <a href="#">Submenu Item 3</a>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>

原理说明 #

• 通过padding-bottom给滚动条预留独立空间，避免子菜单和滚动条出现重叠
• 修正overflow-y: visible，确保容器不会裁剪垂直方向溢出的子菜单
• 提高导航列表和子菜单的z-index层级，让它们显示在滚动条上方

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