如何将鼠标悬停在导航项上并打开下拉列表？

Question

我尝试了将鼠标悬停在导航项上的方法，但是似乎都没有用。如果可能的话，我想用纯HTML / CSS来做。

我尝试使用w3学校方法和其他一些类似方法，但是不确定我在做什么错？

我想仅使用html / css完成此操作，因为这似乎可行，但如果不能，我可以使用javascript

JSFiddle： https://jsfiddle.net/k82g3nmh/

git clone https://github.com/dart-lang/sdk.git

Answer 1

尝试将其添加到CSS的末尾：

#navigation .menu-item:hover > .sub-menu {
    display: block;
}

Answer 2

穆斯塔法几乎是正确的：

  

#navigation .menu-item:hover > .sub-menu { display: block; }

在CSS末尾。

尽管它在您提供的小提琴中不起作用。您还需要删除所有style="display:none"内联样式。 这里有用的小提琴：[1]：https://jsfiddle.net/16sr7faz/。 我建议您不要同时使用内联样式和CSS，但我不知道您的情况。