HTML带滚动二级子菜单定位问题求助：相对父元素定位

要让“some other services”对应的二级下拉菜单相对于其父<li>定位，核心是给父元素设置非static的定位属性，让绝对定位的子元素以此为参考容器，而不是整个屏幕。具体修改如下：

1. 给父级.dropdown-menu-item添加相对定位 #

在CSS的.dropdown-menu-item规则中加入position: relative，使其成为绝对定位的参考基准：

.dropdown-menu-item {
  display: block;
  line-height: 34px;
  background-color: white;
  position: relative; /* 添加该行，设置相对定位 */
}

2. 调整二级下拉菜单的样式 #

将二级.dropdown的内联样式替换为以下规则（建议移入样式表，避免内联代码混乱）：

.dropdown-menu-item:hover > .dropdown {
  display: block;
  position: absolute;
  left: 100%; /* 让菜单显示在父元素右侧 */
  top: 0; /* 与父元素顶部对齐 */
  margin: 0; /* 移除原有margin，避免位置偏移 */
  z-index: 100; /* 确保菜单显示在其他内容上方 */
}

修改后的完整代码 #

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <style>
    body {
      background-color: gray;
    }
    
    .menu {
      list-style: none;
      text-align: center;
      padding: 0;
      margin: 0;
      background-color: white;
    }
    
    .menu-item {
      font-family: 'Roboto', sans-serif;
      border-bottom: none;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      display: inline-block;
      float: left;
      background-color: white;
    }
    
    .menu-item a {
      text-decoration: none;
      color: #000000;
      display: block;
      transition: .3s background-color;
      padding: 0 24px;
    }
    
    .menu-item a:hover {
      background-color: #5c89c7;
      color: #FFFFFF;
    }
    
    a {
      border-bottom: none;
    }
    
    .dropdown {
      display: none;
      background-color: white;
      padding: 0;
      max-height: 200px;
      width: 200px;
      overflow: scroll;
    }
    
    .menu-item:hover>.dropdown {
      display: block;
    }
    
    .dropdown-menu-item {
      display: block;
      line-height: 34px;
      background-color: white;
      position: relative; /* 添加相对定位 */
    }
    
    .dropdown-menu-item:hover>.dropdown {
      display: block;
      position: absolute;
      left: 100%;
      top: 0;
      margin: 0;
      z-index: 100;
    }
  </style>
</head>

<body>

  <div class="nav">
    <ul class="menu">
      <li class="menu-item"><a href="#">HOME</a></li>
      <li class="menu-item"><a href="#">ABOUT US</a></li>
      <li class="menu-item"><a href="#">SERVICES</a>
        <ul class="dropdown">
          <li class="dropdown-menu-item"><a href="#">services</a></li>
          <li class="dropdown-menu-item"><a href="#">services</a></li>
          <li class="dropdown-menu-item"><a href="#">services</a></li>
          <li class="dropdown-menu-item"><a href="#">services</a></li>
          <li class="dropdown-menu-item"><a href="#">services</a></li>
          <li class="dropdown-menu-item"><a href="#">services</a></li>
          <li class="dropdown-menu-item"><a href="#">some other services</a>
            <ul class="dropdown">
                    <li class=" dropdown-menu-item "><a href="# ">some other services</a></li>
                    <li class="dropdown-menu-item "><a href="# ">some other services</a></li>
                    <li class="dropdown-menu-item "><a href="# ">some other services</a></li>
                    <li class="dropdown-menu-item "><a href="# ">some other services</a></li>
                    <li class="dropdown-menu-item "><a href="# ">some other services</a></li>
                    <li class="dropdown-menu-item "><a href="# ">some other services</a></li>
                    <li class="dropdown-menu-item "><a href="# ">some other services</a></li>
                    <li class="dropdown-menu-item "><a href="# ">some other services</a></li>
                    <li class="dropdown-menu-item "><a href="# ">some other services</a></li>
                    <li class="dropdown-menu-item "><a href="# ">some other services</a></li>
                    <li class="dropdown-menu-item "><a href="# ">some other services</a></li>
                    <li class="dropdown-menu-item "><a href="# ">some other services</a></li>
                  </ul>
                </li>
                <li class="dropdown-menu-item "><a href="# ">services</a></li>
                <li class="dropdown-menu-item "><a href="# ">services</a></li>
                <li class="dropdown-menu-item "><a href="# ">services</a></li>
                <li class="dropdown-menu-item "><a href="# ">services</a></li>
                <li class="dropdown-menu-item "><a href="# ">services</a></li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>

原理说明 #

• 绝对定位元素默认以视口为参考，当父元素设置position: relative后，会改为以该父元素为定位基准。
• left:100%让二级菜单刚好对齐父<li>的右侧边缘，top:0保证与父元素顶部对齐，避免错位。
• z-index:100确保下拉菜单不会被其他页面元素遮挡。

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