Html 多个css下拉菜单出现在同一位置

我目前正在处理多个css下拉菜单，问题在于菜单出现的位置。正如您所看到的，Shop menu（商店菜单）位于其自身的位置，但services menu（服务菜单）显示的位置与Shop menu（商店菜单）之前的位置相同。我是前端web开发的新手，所以有人能帮我解决这个问题吗

*{
保证金：自动；
}
a{
文字装饰：无；
}
标题{
显示器：flex；
方向：ltr；
背景颜色：金色；
填充：15px；
}
首席校长{
位置：绝对位置；
显示：无；
填充：15px 15px；
背景颜色：浅灰色；
列表样式：无；
保证金：0；
}
首席校长{
垫底：10px；
}
.primaryHeaderMenu ul li:悬停ul{
显示：块；
}
.初级项目{
显示：内联；
左侧填充：30px；
}
首席校长李娜{
颜色：黑色；
字体大小：粗体；
}
二级校长李娜{
颜色：黑色；
字体大小：粗体；
}
primaryHeaderMenu先生{
柔性生长：1；
}
二级校长李曼娜{
显示：内联；
左侧填充：25px；
}

伊兰塞尔

我希望以下内容对您有用

试着替换

.primaryItems {
    display: inline;
    margin-left: 30px;
}

.primaryHeaderMenu ul li ul {
    position: absolute;
    display: none;
    padding: 15px 15px;
    background-color: lightslategrey;
    list-style: none;
    margin: 0;
}

与

及

试着替换

.primaryItems {
    display: inline;
    margin-left: 30px;
}

.primaryHeaderMenu ul li ul {
    position: absolute;
    display: none;
    padding: 15px 15px;
    background-color: lightslategrey;
    list-style: none;
    margin: 0;
}

与

---

此处示例：

添加

位置：相对到
.primaryItems
类。然后添加
left:0
发送到您的
.primaryHeaderMenu ul li ul
班级。问题是
位置：绝对
将其自身提升到HTMLDOM中的第一个相对定位元素，然后它们彼此重叠，因为它们具有相同位置的相同父元素
 尝试添加：
位置：相对
到
。主项
和
左：0
to
.primaryHeaderMenu ul li ul
除了自己修复它之外，我还强烈建议您检查一下，因为您提到您是前端开发的新手。@BjørnNyborg它工作正常，谢谢，您能解释我出了什么问题以及您是如何修复它的吗？@LukeGalea当然，感谢当您使用
绝对值定位某个对象时，它将根据最近的非静态定位元素进行定位。因此，如果希望根据
.primaryItems
放置下拉列表，则需要为这些下拉列表添加位置。左<代码>为0
表示它们将被放置在距离最近的“非静态定位元素”左侧0px的位置，在本例中是父元素
。primaryItems
非常感谢