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

时间:2019-05-15 17:06:59

标签: javascript html css

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

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

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

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

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

穆斯塔法几乎是正确的:

  

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

在CSS末尾。

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