如何创建一个向下滚动的菜单？ CSS答案

【问题标题】：How to create a menu that rolls down? CSS如何创建一个向下滚动的菜单？ CSS
【发布时间】：2013-05-03 20:25:12
【问题描述】：

例子：

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

我想创建一个看起来#two 从#one 下来的效果，我尝试使用过渡，所以当我：悬停在#one 上时，#two 似乎从#one 下来，但内容保留在那里虽然只有背景的大小发生了变化，但我希望整个列表看起来像本网站中的 #one 一样：http://merryweddings.com/

【问题讨论】：

下拉菜单的高度有变化吗？如果它没有，并且一直说它是 500PX 高，那么这只能通过 CSS 来完成。否则它是非常错误的，因为唯一的方法是动画最大高度，这使它表现得有点时髦。如果您没有在下拉列表中设置特定高度，那么您将要使用 javascript/jquery 来执行此操作。

标签： css drop-down-menu css-selectors transitions

【解决方案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;
}

但是在这种情况下，动画的结束可能有点突然。

【讨论】：

非常适合我！谢谢！
这是跨浏览器吗？

【解决方案2】：

您可能希望为此使用 JQuery 而不是纯 CSS。

看看这个例子：http://labs.abeautifulsite.net/jquery-dropdown/

This link 还展示了很多可能的 JQuery 解决方案。

【讨论】：

不，我说的不是这个，请参考我指的网站
好的，我很确定这可以通过 JQuery 插件完成，但我不知道只有 CSS。
只能通过 CSS 实现，但前提是下拉菜单的高度是固定的并且不会改变。如果下拉列表的高度发生变化，那么 javascript/jquery 就是解决方案。

【解决方案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 方法的唯一解决方案。第二个链接显示了一种解决方法或黑客攻击。第一个给出了一些进一步的细节。

【讨论】：