CSS3
感兴趣的可以自行去github长进修源码，github地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/dropdown/dropdown.html
首先，我们来看看带动画效果的下拉列表效果是什么样的，如下图所示。
效果图
页面组成这里我们大略剖析下页面的构成，实际上非常的大略，紧张包含以下三个元素。
表示外层容器的div元素
上面是一个span元素
下面是一个ul元素，每个li表示一个列表项
在全体下拉列表中，紧张有两个动画。
下拉菜单阁下的小三角图标，在鼠标悬浮和离开时动态变换
下方的列表，在鼠标悬浮和离开上面的span元素时，列表会有动画显示和消逝的效果。
代码构成下面我们来看看全体页面的代码构成。
HTML
首先是页面的HTML代码，正如上一部分所讲，页面紧张为一个外层容器div，内部是一个span和ul元素，每个列表项li内包含一个a元素，所有HTML部分代码如下所示。
HTML代码
CSS
CSS部分的代码才是全体实现效果的核心，我们详细来剖析。
首先是页面的全局基本配置样式。
全局配置
然后是外层容器的样式。
外层容器样式
然后是span元素的样式，阁下的上三角形通过伪元素::after来实现，在::after伪元素中通过border-color属性来掌握三角形的朝向，然后通过transition属性设置变换样式。
span元素以及上三角形
当鼠标勾留在span元素上时，span元素背景色会改变，上三角会变成下三角。
鼠标勾留后span的样式
紧接着是下面的ul以及li元素的样式，都是一些很普通的属性。
ul与li样式
然后是li下的a元素的样式。
li下a元素样式
然后是css中最核心的地方，ul的动画效果，通过translate3d属性改变ul所处的位置，再以transform属性添加动画效果。
ul初始状态
至此，所有代码讲解完毕，如果运行成功后，会得到文章开始时的下拉列表效果。
结束语本篇文章紧张给大家先容了如何利用CSS编写一个带动画的下拉列表效果，你学会了吗？
