菜單：如何自動選擇第一個子項

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：懸停），你也可以觸發動畫顯示的第二級菜單項。