本篇教程探讨了如何制作炫酷的下拉框，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

Web前端开发工程师是一个很新的职业，是从事Web前端开发工作的工程师。主要进行网站开发，优化，完善的工作。网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

给你学习路线，html-css-js-ajax-jq-html5-css3-bootstrap-vue.js-node.js-react.jd

CSS3炫酷的下拉框的原理：

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

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

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

效果图

其实这个是用CSS3过渡和动画制作的

HTML代码

CSS

完整的代码