下拉导航菜单被下部 div 重叠答案

【问题标题】：Drop-down navigation menu being overlapped by lower div下拉导航菜单被下部 div 重叠
【发布时间】：2011-09-22 20:03:10
【问题描述】：

堆栈，

我很难仅使用 css 创建一个好的下拉导航菜单。菜单很简单，里面只需要几样东西，只要往下拉（不用往下往下等）。

菜单有点工作，但是每当我将鼠标悬停在它上面以将其下拉时，菜单就会与菜单所在的标题 div 正下方的包装 div 重叠。我已经尝试将下拉菜单的 z-index 设置为 20000，但它仍然被重叠。

这是我正在处理的测试页面的直接链接：

有什么想法吗？

谢谢，

一言难尽

【问题讨论】：

【解决方案1】：

在#fullheaderbar 和#profilemenu 中，您需要删除overflow:hidden;，在.profile-menu ul 中，您需要将position:relative 更改为position:absolute;

然后从那里调整:)

【讨论】：

好的，我让你改变了，这似乎奏效了。然而现在又出现了新的挑战者！再快速浏览一下页面，您会发现它正在向下推动包装器 div 而不是重叠它。关于如何解决的任何想法？
改变位置：相对于位置：绝对像@Joseph 提到的那样。您需要在下拉项目列表中执行此操作。在您的 html 代码中，它是标签 <ul class>（您忘记提供类名）
啊...对不起。错过了悬停效果。将 .profile-menu:hover ul 规则中的 position:relative 更改为 position:absolute (lolbrarystyle-workbench.css:326)
@ImportedNoob，谢谢你们。我有一堆垃圾代码需要清理，我昨晚在大量课程上放置了相对位置，希望通过向墙上扔泥直到它卡住来修复它。其中一些覆盖了我的绝对位置，所以我将它们全部删除，它现在似乎正在工作。只需要调整ftw！感谢你们快速而有帮助的回复。
@ImportedNoob 它与他的 :hover 规则有关。目前它应用于锚标签。将鼠标悬停在子菜单上后，该 rue 就会消失。将悬停触发器更改为父菜单项（而不是锚点）应该可以修复它。