之前一直都在学习新的知识，一直没想写博客，由于学的东西要上一个台阶，所以就先把之前做过的一个小东西好好总结一下，也可以分享给其他初次接触前端的小白。 今天我要介绍一种利用css3动画实现有过渡效果的二级下拉菜单。 效果如下： 其实这个动画的制作很简单，只要注意一些细节，其实很容易做出来。

基本技术： ①把二级菜单放在一次菜单的里面，让他们成为父子 原因：接下来我为要用到hover伪类来触发动画，而hover伪类要想触发成功，触发器和触发对象必须含有父子或祖孙关系。

②定义动画： **分析：**其实这个动画，我们可以解释成，二级菜单的高度由初始的0px，一直慢慢的变长到能显示所有的选项。 有小朋友可能就会问，那我怎么才能知道什么时候才能刚好变长到能显示完二级菜单中的所有选项呢？ 其实我们应该在定义动画前先确定二级菜单中每个选项的盒子高度是多少（包括padding、边框还有margin），这样我们针对含有不同的数目选项的二级菜单，我们可以定义不同的动画，这里我的二级菜单选项高度是30px, 并且二级菜单有四种不同高度；

ps:不了解css3动画的可以先去学习animation的使用。

③设置完二级菜单的样式后，把他们都先隐藏，即设置css的display属性为none； 接着是对不同二级菜单设置不同类型的动画：

这里再送上一张对于过渡方式: timing-function的各种属性的效果说明：

当鼠标悬浮在一级菜单时，使hover伪类生效，把二级菜单的display属性改为block;

ps:如果使用css过渡transition来做，就不能通过改变display属性了，会没有动画效果，但是你可以通过改变visibility属性来实现一样的效果。

按理来说，根据以上步骤，菜单下拉动画已经完成了，but!! 我们这里是有点不同的，为了美观，我们这里的二级菜单和一级菜单是不相连的！