如何創建滾動的菜單？ CSS

Question

例子：

<div id="one"> 
    (content) 
</div> 
<div id="two"> 
    <ul>............</ul> 
    </div> 

我希望創建一個看起來#two是從正在添加下來#one，我嘗試使用的過渡，所以當我的影響：將鼠標懸停在#one所以#two似乎是未來從#one下來，但內容呆在那裏，而只有背景變化的大小，我希望整個列表似乎從#one像下面這個網站：http://merryweddings.com/

Answer 1

如果你知道div的大小會彈出，你可以做的「高度」屬性一個簡單的過渡，就像這樣：

http://jsfiddle.net/BeDQr/

你也可以使用在過渡'max-height'屬性並將其設置爲非常大的值。

#two { 
    max-height: 0; 
    overflow: hidden; 
    transition-property: max-height; 
    transition: all 1s ease-in-out; 
} 
.wrapper:hover #two { 
    max-height: 500px; 
} 

但是在這種情況下，動畫結束可能有點突然。

Answer 2

你可能想用這個JQuery純CSS的。

看看這個例子：http://labs.abeautifulsite.net/jquery-dropdown/

This link也顯示了很多可能的JQuery的解決方案。

Answer 3

請參閱此鏈接在這裏：How can I transition height: 0; to height: auto; using CSS?

也看到鏈接在上面的鏈接的第一個答案是這裏：Can you use CSS3 to transition from height:0 to the variable height of content?

這，不幸的是，你唯一的解決方案，純CSS方法。第二個鏈接顯示了一種解決方法或黑客。第一個給出了一些更多的細節。