javascript - 菜单 : how to auto select first subitem

Question

我需要重现我们可以在 forbes.com 上找到的那种菜单。我只对 Logo 项子菜单感兴趣。我就快完成了。我制作了 Logo 元素菜单，带有类别名称的第一级菜单和显示每个类别的文章链接的第二级菜单。

到目前为止，它是一个以基本方式设置的完整 CSS 菜单。当用户将鼠标放在 Logo 上时，它只显示第一个子菜单级别。我想我需要一些 JS，因为我的目标是 - 就像在 forbes 子菜单上一样 - 在第一个子元素上显示鼠标悬停效果，以允许同时显示第二个子菜单级别。 (看起来更好看)

这是我的代码(简化):

<ul id="menu"><li>
<a href="#" >Mylogo</a>

<ul class="submenu1">

<li class="item1"><a href="#">item1</a>
<ul class="subemnu2">content</ul>
</li>

</ul>/*----submenu1-------*/
</li>/*-----li menu------*/
</ul>/*---- ul menu-------*/

感谢您的帮助。问候

Answer 1

您的用例不需要 JavaScript。您可以使用 CSS3 动画来实现:

http://www.w3schools.com/css3/css3_animations.asp

当用户将鼠标悬停在第一个子项上时，您可以更改其外观 (.submenu1:hover)，还可以触发动画以显示第二级菜单项。