簡單的動畫CSS-3菜單

我是一個新的HTML/CSS人，我只想學習HTML和CSS，現在我看到了這個美妙的website，看到當你將鼠標懸停在菜單上的關於我們的選項卡上，子菜單。那是我嘗試重新創建的動畫。簡單的動畫CSS-3菜單

這是我試過的：fiddle。

現在，這一切工作正常，下面是實際做的伎倆的CSS：

.menu > li a:hover ~ .sub-menu{ 
    display: block; 
    -webkit-animation-name: smallanim; 
    -o-animation-name: smallanim; 
    animation-name: smallanim; 
    -webkit-animation-duration: .5s; 
    -o-animation-duration: .5s; 
    animation-duration: .5s; 

} 

@keyframes smallanim { 
    0% { 
     transform:translateY(20px); 
    } 
    100% { 
     transform:translateY(0px); 
    } 
}

其.menu > li a:hover ~ .sub-menu這個選擇，基本上做的伎倆。但這是做到這一點的正確方法嗎？如果您將鼠標懸停在主菜單上，則出現子菜單，但是當您嘗試將鼠標懸停在子菜單上時，菜單消失。我需要使用Jquery嗎？這是唯一的解決方案嗎？

謝謝。

Alx-z。

來源

2015-04-06 Alexander Solonik

你需要'。菜單>李：鼠標懸停在一個〜.SUB-menu'，而不是'。菜單>李a：hover〜.sub-menu' – 2015-04-06 06:45:11

@BatuZet post tat作爲回答，帶走25個布朗尼點數！ – 2015-04-06 06:47:10

你需要做的

，而不是

.menu > li a:hover ~ .sub-menu

來源

2015-04-06 06:48:01

簡單的動畫CSS-3菜單

回答

相關問題