请参阅以下链接：
http://cssmenumaker.com/builder/111528
我想弄清楚。我不明白它是如何工作的 - 我无法理解子菜单如何保持隐藏状态并且不会干扰页面的其余部分。
请允许我进一步解释 - 当我试图自己制作时，我想到了我必须隐藏并显示子菜单（我使用DIV标签认为我很聪明）但是当它变得可见时它们会然后取代他们在DOM中的位置并将其他所有东西都移开（我显然想要避免但不完全理解如何完成）。当我试图使用JS制作我的时候它并没有按照我想要的方式工作。我将嵌套DIV标签（子菜单）的'display'和'visibility'属性分别更改为'none'和'hidden'，直到onmouseover事件，它只是无法正常工作，我不知道如何制作像这个例子一样工作。
我正在查看悬停命令，无法看到这是如何使子菜单在悬停之前不可见的。我也只能看到display：block命令作为它们如何显示的唯一参考，但是不明白它们如何在显示时不会移动所有其他东西。
这有什么意义吗？任何人都可以解释这个例子是如何工作的，DOM模型是什么样的，以及DOM的所有部分是如何相互作用的？ W3C对此没什么帮助。
我的印象是DOM模型是静态的，除非你添加一些复杂的z-index或其他方法，否则它将以盒子方式显示，所以我在这里缺少什么？我也更喜欢纯CSS解决方案，这就是为什么我发布上面的例子，我想要了解所有这些比我目前更多。
非常感谢任何帮助！
答案 0 :(得分：1)
答案是：绝对位置。
绝对位置会从静态流中移除元素，因此不会推开其他元素。要控制绝对定位的元素，可以将它们包装在相对定位的元素中：偏移父元素。这样，您就可以创建块/菜单/等。在正常流动中，绝对定位元素。
简要说明：http://css-tricks.com/absolute-positioning-inside-relative-positioning/
display none / block部分只是隐藏/显示子菜单。如果父母得到：悬停，则可以使用display：block。
显示子菜单