css - 将鼠标悬停在子菜单上时，顶部菜单 li 处于活动状态

Question

我遇到了这个网站http://northerly.com.au/，我想知道如何在将鼠标悬停在其子菜单上时激活顶部菜单。在这种情况下，似乎没有 js 脚本来添加活动类。那它是怎么做的呢？谢谢

Answer 1

实际上，当您将鼠标悬停在子菜单上时，这不是处于活动状态的顶部菜单 li。在子菜单元素之前有一个兄弟 SPAN，由于悬停到子菜单，您也悬停了容器 li 元素。

top li 有两个元素： SPAN 有顶部菜单标题和子菜单

使用这样的 CSS 选择器：

li:hover span {/*span is active!*/ }

在这里查看一个简单的演示。