Html CSS下拉菜单，带有子菜单“相对于其他元素的绝对/相对位置”

我正在尝试创建一个水平下拉菜单，其中每个子菜单都将显示在相同的位置（而不是每个子菜单下）。我想在不使用javascript的情况下实现这一点，这是我目前所做的示例（它只是简单的css下拉菜单）：

我必须发布一些带有链接的代码，所以我选择了这个块来向您展示：

.main_menu ul {
  background-color: #efffc7;
  display: none;
  z-index: 100;
  width: 980px;
  height: 324px;
  left:0;
  position: absolute;
}

这是子菜单的css，但当我使用position absolute或relative定位它时，它将只定位在其父DIV中。我尝试使用fixed position，但这并不漂亮

如果这个问题已经回答了，我很抱歉，但是我很难找到关于这个话题的任何东西。我希望这可以只用CSS来完成

谢谢

编辑：

---

我为相关人员制作的菜单可以在这个非常有趣的场景中找到。我喜欢灵活地移动弹出窗口的想法，CBroe的优秀评论让我想到了这一点

CSS-只需转到“持有者”ul并使其位置相对

#nav {
    position: relative;
}

CSS-然后绝对定位“悬停”元素：

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
    display: block;
    position: absolute;
    top: 50px;
    left: 150px;
}

---

非常感谢你

绝对位置将位置值与默认值不同的最近的祖先元素作为参考点，因此，如果您不希望子菜单相对于其父元素进行定位，则不要定位后者。谢谢您的示例！如果没有它，我将无法制作菜单。但所有这些都是使用绝对定位，而且根本没有响应。