CSS菜单和子菜单之间的悬停状态维护

Question

我的问题与这篇文章有关：CSS Space between menu and submenu

我想了解的是为什么这个特定的解决方案适用于原始问题。为什么编辑 nav ul ul:before 的属性会影响悬停状态，当悬停在该列表中的 li 项目上时似乎被定义为活动？我在自己的代码中使用了这个解决方案并取得了巨大的成功，但不明白它为什么会起作用。 li 是否只是扩展以填充 ul:before 的空间？

提前感谢您的洞察力。

Answer 1

该解决方案行之有效，因为在该答案中设置了 nav ul ul:before 规则，在第二个 ul 之前直接设置了附加内容。它是一个空内容，大小为 20px，顶部位置为 -20px。因为第二个 ul 是第一个 ul 的 li 的子级，并且没有设置固定的高度，所以它会像所有其他带有 height:auto; 的容器一样扩展到内容的高度。