html - 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;至内容的高度。