html - 缓慢的下拉菜单过渡 CSS

Question

我在JS fiddle创建了一个下拉菜单。

我想要下拉菜单的缓慢过渡。

现在它刚刚弹出，看起来很平淡。

// Ignore this line

Answer 1

听起来您应该将此示例用作您的基础

我还建议使用标签而不是仅使用 id 为 main-nav-menu 的常规标签。

您正在使用背景图像来创建蓝色背景？您可以在 css 中为 li 和 a 元素指定颜色来实现您想要的，而不是使用背景图像。

这是您应该使用的代码：http: //www.newmediacampaigns.com/blog/nicer-navigation-with-css-transitions-part-2

这是每个人的样子：http ://codepen.io/toddsynan/full/pJuyx

以下是当最大高度通过悬停从 0 变为 150 像素时，这个家伙用来创建过渡的内容。

 -webkit-transition:max-height 500ms ease;
 -moz-transition:max-height 500ms ease;
 -o-transition:max-height 500ms ease;
 transition:max-height 500ms ease;