带有子菜单绝对/相对位置到其他元素的 CSS 下拉菜单答案

【问题标题】：CSS dropdown menu with submenu absolute/relative position to other element带有子菜单绝对/相对位置到其他元素的 CSS 下拉菜单
【发布时间】：2014-04-03 16:35:52
【问题描述】：

我正在尝试制作一个水平下拉菜单，其中每个子菜单都将出现在同一位置（而不是在每个子菜单父项下）。我想在没有 javascript 的情况下制作它，这是我现在所做的示例（它只是普通的 css 下拉菜单）：

http://jsfiddle.net/pEdaE/

好吧，我必须发布一些带有链接的代码，所以我选择了这个块给你看：

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

这是子菜单的css，但是当我用绝对或相对位置定位它时，它只会定位在他的父DIV中。我尝试使用固定位置，但这并不漂亮。

很抱歉，如果这个问题已经得到解答，但我很难找到关于这个主题的任何内容。我希望这可以仅使用 CSS 来完成。

谢谢

编辑：

感谢参与人员制作的菜单可以在FIDDLE中找到

【问题讨论】：

绝对位置将位置值与默认 static 不同的最近的祖先元素作为参考点 - 因此，如果您不希望子菜单相对于其父元素定位, 然后不要定位后者。

标签： html css drop-down-menu

【解决方案1】：

非常有趣的情况。我喜欢灵活地移动弹出窗口的想法，CBroe 的出色评论让我想出了这个FIDDLE。

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;
}

非常感谢 CBroe！

【讨论】：

感谢您的示例！没有它，我将无法制作菜单。
但这一切都是使用绝对定位，根本没有响应。