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

Question

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

到目前为止，这是一个完整的CSS菜单，以基本的方式设置。当用户将鼠标放在徽标上时，它只显示第一个子菜单级别。我想我需要一些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），还可以触发动画以显示第二级菜单项。