CSS3炫酷的下拉框的原理：

1.首先就是一个导航下拉，就是鼠标放上去出现一个下拉列表

2.然后发现，下拉里面，每一个选项是从不同的两个方向出现的

3.出现的方式是奇数项从左边进，偶数项从右边进，进入方式是滑动淡入。

效果图

其实这个是用CSS3过渡和动画制作的，没有用到JS也是可以做出这样的效果，那么他的代码是怎样的呢?我给大家罗列出来：

HTML代码

CSS代码

完整的代码

这个动画，我感觉虽然性能上css3是比js要好一些。毕竟js也是控制css或者class来实现!

灵活性的话，这个就要比js差了，比如div的显示与隐藏，我不想通过鼠标移入移出的方式控制，如果我想通过点击的方式控制div的显示与隐藏呢。对于js的方式来说，这个就是触发的事件就可以了，对于插件来说，可能就改一个插件就行了!对于css3实现的话，这个就不但要改css样式了，也要改html结构了!

这里，我的建议就是，这个动画理想的还是用js和css3结果，结果是好的。如果针对灵活性不高的需求，可以只用css3。