Dropdown菜单位置错位问题求助（附HTML/JS代码）

核心问题分析 #

你的下拉列表.list使用了position: absolute，但它的父元素.dropdown没有设置position: relative，导致绝对定位的列表会相对于页面中最近的有定位属性的父元素（而非预期的MORE按钮所在容器）定位，这就是位置偏移的根本原因。

具体修复步骤 #

1. 给父容器添加相对定位
   修改.dropdown的CSS，添加相对定位让子元素的绝对定位以它为基准：

   .dropdown {
     align-items: center;
     position: relative; /* 新增：约束子元素绝对定位的基准 */
     padding: 0; /* 可选：消除默认内边距避免错位 */
   }
   

2. 调整下拉列表的定位细节
   给.list添加定位偏移，让它紧贴按钮下方：

   .list {
     position: absolute;
     top: 100%; /* 让列表从父容器底部开始 */
     left: 0; /* 对齐父容器左侧 */
     margin: 0; /* 清除ul默认外边距 */
     padding: 0; /* 清除ul默认内边距 */
     align-items: center;
     text-align: center;
     transform: scaleY(0);
     transform-origin: top;
     transition: 0.3s;
     height: auto;
     width: 150px;
     border-radius: 5px;
     background-color: #3a4172;
     cursor: pointer;
     overflow: hidden;
     box-shadow: 2px 0px 10px 5px rgba(0, 0, 0, 0.7);
     list-style: none;
   }
   

3. 修正HTML结构规范问题
   HTML规范中<ul>的直接子元素必须是<li>，同时页面中多个元素使用了重复的id="regular"（ID必须唯一），调整如下：

   <header>
     <ul>
       <li class="regular"><a href="#">EARN</a></li>
       <li class="regular"><a href="#">PROMOCODES</a></li>
       <li class="regular"><a href="#">WITHDRAW</a></li>
   
       <li class="dropdown">
         <button class="dropdownButton">MORE ▼</button>
         <ul class="list">
           <li><a href="#"><button class="links">REFFERALS</button></a></li>
           <li><a href="#"><button class="links">DAILY</button></a></li>
         </ul>
       </li>
   
       <li id="login"><a href="#">SIGN UP</a></li>
     </ul>
   
     <script>
       //Dropdown
       let click = document.querySelector('.dropdownButton');
       let list = document.querySelector('.list');
   
       click.addEventListener("click", () => {
         list.classList.toggle('newlist');
       });
       //Dropdown End
     </script>
   </header>
   

效果说明 #

完成修改后，下拉列表会以MORE按钮所在的.dropdown容器为基准，精准显示在按钮正下方，同时修正了HTML结构的不规范问题，避免潜在渲染异常。

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