菜单：如何自动选择第一个子项

Question

我需要复制我们可以在 forbes.com 上找到的那种菜单。我只是对徽标项目子菜单感兴趣。 我马上就好。我制作了徽标项目菜单，第一级菜单带有类别名称，第二级显示每个类别的文章链接。

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

这是我的代码（简化版）：

<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)，您还可以触发动画以显示第二级菜单项。