为什么悬停推送内容？

Question

如果您将鼠标悬停在this website上的菜单上，您会看到内容被推下。我继承了其他人的样式表，这是一个完整的混乱。任何人都可以向我解释为什么这个悬停在推低内容？

菜单内置如下：

li > ul class .sub-menu > li > a class .sub_menu_item

我看着position和display CSS，但我似乎无法找到任何异样。任何帮助将不胜感激！

Answer 1

当我检查悬停在'三列'div中的第一个li时，您可以检查下拉列表并查看它是否继承了默认的“position：'relative'”。

你想在ul class =“子菜单”上应用样式“Position：'absolute'”，这将使它在自己的容器中有效，因此它可以大部分位于它想要的位置，控制其定位。这是除非它的父母有设置“位置：”相对'“，然后它会遵循包含单元的边界）。

还抬头 - 如果应用绝对位置，看起来您需要增加下拉单元格右侧边框半径的宽度或其他值。

Answer 2

加入这行到你的CSS文件：让他们留在文档流显示，当他们

#navigation ul.sub-menu{ 
    position:absolute; 
} 

Answer 3

的.sub-menu元素没有给出一个位置。他们需要一个position: absolute将其从流中移除并防止内容转移。