菜单悬停＆＃39;下拉＆＃39;效果CSS

Question

我正在尝试对我的菜单进行某种悬停效果。你可以在www.firstborn.com上看到我想要的效果。它基本上从顶部向下滑动，但不均匀。我尝试了各种CSS，并检查了他们的代码，但是无法正确完成。仅CSS不可能吗？我是否必须安装类似于animate.css的内容？

这是我使用的代码。该ID是我整个菜单中的一个。

＆＃13;

＆＃13;

#Top_bar:hover {
-webkit-transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1);
transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1);
background: #000;
color: #fff;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

这应该可以，你基本上可以在元素上设置高度属性。你必须设置初始高度，然后在悬停时你必须改变高度

#Top_bar {
-webkit-transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1);
transition: 0.2s height cubic-bezier(0.77, 0, 0.175, 1);
background: #000;
color: #fff;
height: 200px;
}

#Top_bar:hover{
 height: 500px;
}