css - 如何创建一个向下滚动的菜单？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 的大小，你可以在 'height' 属性上做一个简单的转换，像这样：

http://jsfiddle.net/BeDQr/

您还可以在“最大高度”属性上使用过渡并将其设置为非常大的值。

#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/

此链接还显示了许多可能的 JQuery 解决方案。

Answer 3

在此处查看此链接：如何转换高度：0；到高度：自动；使用 CSS？

另请参阅上述链接的第一个答案中的链接：Can you use CSS3 to transition from height:0 to the variable height of content？

不幸的是，这是纯 CSS 方法的唯一解决方案。第二个链接显示了一种解决方法或黑客攻击。第一个给出了一些进一步的细节。