Html 带有子菜单相对于其他元素的绝对/相对位置的 CSS 下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22615351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS dropdown menu with submenu absolute/relative position to other element
提问by e_scape
I'm trying to make a horizontal drop-down menu where every submenu will appear in the same position (not under every submenu parent). I want to make this without javascript and this is example of what I have done for now (it's just plain css dropdown menu):
我正在尝试制作一个水平下拉菜单，其中每个子菜单都将出现在相同的位置（而不是每个子菜单父项下）。我想在没有 javascript 的情况下制作它，这是我现在所做的示例（它只是简单的 css 下拉菜单）：
Well I have to post some code with link so I picked this block to show you:
好吧，我必须发布一些带有链接的代码，所以我选择了这个块来向您展示：
.main_menu ul {
background-color: #efffc7;
display: none;
z-index: 100;
width: 980px;
height: 324px;
left:0;
position: absolute;
}
This is css for submenu, but when I position it with position absolute or relative, it will just be positioned in his parent DIV. I tried using fixed position, but that's not pretty.
这是子菜单的 css，但是当我用绝对或相对位置定位它时，它只会定位在他的父 DIV 中。我尝试使用固定位置，但这并不漂亮。
I'm sorry if this question was already answered but I was having difficulties finding anything on this topic. I hope this can be done using only CSS.
如果这个问题已经得到回答，我很抱歉，但我很难找到关于这个主题的任何内容。我希望这可以只使用 CSS 来完成。
Thanks
谢谢
EDIT:
编辑：
The menu I made thanks to those involved can be found in this FIDDLE
我感谢那些参与的人制作的菜单可以在这个FIDDLE 中找到
采纳答案by TimSPQR
Very interesting situation. I like the idea of having the flexibility to move a popup around a bit, and CBroe's excellent comment allowed me to come up with this FIDDLE.
很有趣的情况。我喜欢灵活地稍微移动弹出窗口的想法，CBroe 的出色评论让我想出了这个FIDDLE。
CSS - just go to the "holder" ul and make its position relative.
CSS - 只需转到“持有人” ul 并使其位置相对。
#nav {
position: relative;
}
CSS - then position the "hovered" elements absolutely:
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;
}
Thanks very much CBroe!
非常感谢CBroe！
