CSS3炫酷的下拉框的原理：

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

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

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

效果图

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

今天千锋武汉Web前端培训小编向大家精选了10款超酷的HTML5/CSS3菜单，给你的网页添加不一样的精彩，一起来围观一下吧！

1、CSS3手风琴菜单 下拉展开带弹性动画

利用CSS3技术可以实现各种各样的网页菜单，我们之前也在CSS3菜单栏目中分享了许多CSS3菜单。今天千锋武汉Web前端培训小编分享的这款是CSS3手风琴菜单，菜单项在展开和收缩的时候菜单项会有弹性动画效果。每一层父级菜单有一个小三角，菜单项在展开的时候这个小三角也会出现动画，非常酷。

以配置本地服务器搭建本地网站为例子，首先在后天新建一个顶级栏目，操作截图如下：

点击确定即可，然后点击增加子类，截图如下：

增加的子类，内容填充如上截图，填写完成后，点击确定。然后点击栏目生成，主页生成。主页截图如下：

之后百度搜索dede下拉菜单代码：

点击第一个展现位，选中代码，复制，粘贴到footer.html 最低底部中，

生成主页刷新，下拉子栏目就会出现，截图如下：

IT之家3月31日消息 据Chromium官方博客，在过去的一年中，Google Chrome团队和微软Edge团队合作，“对Chromium浏览器中的内置表单控件进行了主体化和改进”，改善了按钮、下拉菜单、复选框等HTML控件的UI及体验。

另个团队致力于“一致且易于感知”的新UI，采用新主题的HTML控件在设计上更加现代及平面化。

主题： 导航 交互设计

下拉菜单在网页设计中显然占有一席之地。然而，他们的过度使用和误用造成了许多可用性问题和混乱。设计师们为了各种不同的目的而使用下拉，包括:

• 命令菜单，它根据所选选项启动一个操作

当用户单击“发布” 图标时，Microsoft Word使用下拉菜单显示发布命令。

js好烦对不对，搞事情简直

所以呢，小姐姐我要砸他小招牌，用新宠css3去实现我的下拉菜单，再加个滑动滚动条，比他好看(#‵′)凸

简单粗暴，上代码，不说话

css上呢样式布局上改变了，说了要搞事情，那就不能再傻嗨嗨的用js常用的浮动布局，咱用display：inline-block去布局整个二级菜单

自行理解哈，想要源码的可以来142991222 问小姐姐我要。

这是小编用纯css编辑的一个导航栏,包含下拉框,下面是代码部分:

这是一个最基本的一个下拉导航栏,并没有使用JavaScript,而用纯css代码.其中菜单部分用ul,li封装,使用最基本的定位把菜单做成..大家可以模仿代码试着打一遍,熟能生巧,加油ヾ(?°?°?)??!

咳咳,谢谢点赞,谢谢关注,谢谢收藏.

有不懂的或者讨论的萌新可以在评论区留言哦!