多下拉菜单异常：下拉项未显示在对应触发元素下方

嘿，我瞅了你的代码问题，这个下拉菜单全挤在第一个元素下面的情况，本质是绝对定位的上下文没设置对！

问题根源 #

你的.dropdown-content用了position: absolute来实现悬浮效果，但它的父容器.dropdown没有设置position: relative。根据CSS定位规则，绝对定位的元素会向上寻找最近的「有定位属性（非static）」的父元素作为定位基准——如果找不到，就会以整个文档根节点为基准，这就导致所有下拉框都跑到同一个位置去了。

修复步骤 #

1. 给每个下拉容器设置定位上下文
   给.dropdown类添加相对定位，让它成为子元素.dropdown-content的定位基准：

   .dropdown {
     position: relative;
     /* 可以再加个display: inline-block，确保容器宽度适配内容 */
     display: inline-block;
   }
   

2. 调整下拉框的位置（可选但推荐）
   把.dropdown-content的定位改成基于父元素的底部对齐，这样下拉框刚好贴在菜单项下方：

   .dropdown-content {
     position: absolute;
     top: 100%; /* 距离父元素顶部100%，也就是刚好在下方 */
     left: 0;
     /* 保留你原来的其他样式，比如背景、padding、z-index这些 */
   }
   

效果验证 #

做完这两步后，你把鼠标悬停在不同的菜单项上，对应的下拉菜单就会乖乖出现在当前选中元素的正下方，不会再跟第一个菜单抢位置啦～

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