Html 带有fadein和height的下拉菜单

我正在尝试创建一个类似于here（）的导航菜单以供练习，虽然我的导航菜单非常接近，但我的导航菜单看起来不如示例中的导航菜单（动画没有那么平滑）。源代码非常大，我无法找到作者是如何在css代码中或通过javascript创建动画的。这是我到目前为止所拥有的。有人能看一下并告诉我我做错了什么吗

我用来使菜单向下滑动的方法是使用“最大高度”属性，并使用“不透明度”属性使其淡入

大量动画代码：

.menu > li:hover > ul {
    display: block;
    -webkit-transition: max-height 0.2s, opacity 0.2s;
    -moz-transition: max-height 0.2s, opacity 0.2s;
    -ms-transition: max-height 0.2s, opacity 0.2s;
    -o-transition: max-height 0.2s, opacity 0.2s;
    transition: max-height 0.2s, opacity 0.4s;
    max-height: 500px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
.dropdown {
    max-height: 0;
    position: absolute;
    list-style: none;
    background: #2c2c2c;
    margin: 0;
    padding: 0;
    overflow: hidden;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

我的朋友：

---

他们没有使用Transistion，代码是这样的

或

这个

两者都是不同的风格

第一种方法使用

mouseenter

和

mouseleave

功能与

delay

功能相结合。除了使用fadeIn，我们还可以将

fadeIn

更改为其他类似的内容

显示

向下滑动

第二个只使用了

slideUp

和

slideDown

功能以及

mouseenter

mouseleave

---

希望这两个选项中的一个能帮助您，如果您需要更多帮助，请评论

我只想增加过渡时间：我正在尝试复制的一个同样长，但我认为它在最后会变慢。也许是一种不同的放松功能。。。