菜單下拉菜單 - 我有一個MooTools的例子，但我怎樣才能使它純CSS？

Question

我喜歡這個網站的主菜單如何下降+淡入。這裏有很多下拉式插件等，但是這個特殊的實現對我來說真的很順利。

問題是由Mootools和MenuMatic支持（http://greengeckodesign.com/menumatic），但我幾乎肯定你可以用純CSS實現相同的效果。我認爲「褪色」會很容易完成CSS透明度過渡，但我不知道如何1）允許下拉動態的寬度和2）「滾動到視圖」而不會破壞在它周圍標記。在過去的項目中，我用「left：-9999em」來解決這個問題，從-9999em到目標位置的動畫發生得非常快，沒有人知道任何不同......但是這看起來像是一種黑客攻擊。

任何想法？

Answer 1

這是可能的。

p { 
    height:0; overflow:hidden; 
    transition: all 2s; 
    opacity: 0; background: salmon; 
    width: 25%; 
} 
a:hover + p{ 
    height:100px; 
    overflow:auto; 
    opacity: 1; 
    transition: all 2s;} 

Demo

您將需要調整它，並添加供應商前綴，當然。