悬停时子菜单不可见

Posted 2023-05-08

【中文标题】悬停时子菜单不可见

【英文标题】：Submenu is not getting visible on hover

【发布时间】：2015-10-18 23:36:15

【问题描述】：

请参阅我的代码和演示Here。我不太习惯使用 css，但它很简单，我看到许多演示几乎使用相同的代码。但我无法发现导致问题的差异

我需要在UserForm 下打开一个子菜单，但它在悬停时不可见（使用 css）

【问题讨论】：

您正在使用 CSS 规则 #main_nav ul ul top: 100% 。这是将元素放置在屏幕底部。

是的，这实际上是答案......谢谢

【参考方案1】：

像这样从#main_nav ul ul 中删除“top”和“left”：

#main_nav ul ul 
    position: absolute;
    visibility: hidden;

这是因为“位置：绝对”的工作方式。在您的情况下，父“li”具有“位置：静态”（默认），在这种情况下，“位置：绝对”使子 ul 在整个文档中绝对放置。如果您只是删除“可见性：隐藏”然后将其放置在页面底部，您可以看到这一点。另一种解决方案是将“位置：相对”设置为父li

【讨论】：

就是这样。对，你能解释一下为什么只有当我删除它们时它才能工作。定位有什么问题？

这是因为“位置：绝对”的工作方式。在您的情况下，父“li”具有“位置：静态”（默认），在这种情况下，“位置：绝对”使子 ul 在整个文档中绝对放置。如果您只是删除“可见性：隐藏”然后将其放置在页面底部，您可以看到这一点。另一种解决方案是将“位置：相对”设置为父 li。