请看下面的链接：
http://cssmenumaker.com/builder/111528
我试图弄清楚。我不明白它是如何工作的 - 我无法理解子菜单如何保持隐藏并且不干扰页面的其余部分。
请允许我进一步解释-当我尝试自己制作时，我想到我必须隐藏并显示子菜单（我使用 DIV 标签认为我很聪明）但是当它们变得可见时，它们会拿走他们的放置在 DOM 中并将其他所有内容移开（我显然想避免但不完全了解如何完成）。当我尝试使用 JS 制作我的作品时，它并没有按我的意愿工作。我将嵌套 DIV 标签（子菜单）的“显示”和“可见性”属性分别更改为“无”和“隐藏”，直到出现 onmouseover 事件，但它无法正常工作，我不知道如何制作像这个例子一样工作。
我正在查看悬停命令，但无法看到这如何使子菜单在悬停之前不可见。我也只能将 display:block 命令视为它们如何显示的唯一参考，但不明白它们在显示时如何不将其他所有内容移开。
这有道理吗？谁能解释一下这个例子是如何工作的，DOM 模型是什么样的以及 DOM 的所有部分是如何相互交互的？W3C 在这里帮助不大。
我的印象是 DOM 模型是静态的，除非您添加一些复杂的 z-index 或其他方法，否则将以框的方式显示内容，那么我在这里缺少什么？我也更喜欢纯 CSS 解决方案，这就是我发布上面示例的原因，我想比现在更了解这一切。
非常感谢任何帮助！