大多数网站中，下拉菜单效果基本常见。在实现技术方面，实现该效果的方法也很多，今天就来说说纯CSS样式来实现常见的下拉菜单，有兴趣的小伙伴可以参考下：
实现效果如下：
鼠标未移上前
鼠标未移上前
鼠标移上后
鼠标移上后
从效果图可以看出，当鼠标移上去的时候，会弹出下拉的菜单层！要是在JQuery中，实现原理也蛮简单，就是当鼠标触发移上去事件，弹层就显示（默认隐藏）的原理！而在CSS实现该效果会用到的原理就是CSS3的动画透明度过渡显示。因为效果图中也有几个三角形图标，所以统一用CSS和CSS3的知识来实现比较容易。下面首先看看html的结构：如下：
布局的CSS：
右边实心的三角形可以用伪类元素 :after来实现.
鼠标移上去，各种变化的样式，其中当鼠标移上去时候，弹出层的透明度变为1，就可以看到内容
当弹层出现后，第一行会有一个三角形指向，实现该三角形可以用到伪类:first-child:before，如下
结合起来就能完成纯CSS做下拉菜单效果！想学更多知识，欢迎关注“恒星网络”头条号！
相关推荐
css怎么用，divcss布局经典实例
虽然CSS简单，但CSS是一门非常有意思的语言，CSS每年都有变化，而且都有不同的博主都在不同的时间段总结一些CSS的新特性。虽然这些新特性无法立刻得到众多浏览器的支持，但总是随着…
网页设计css是什么意思（解析有关CSS代码所有知识）
CSS代码长什么样？ CSS的代码是类似 json 数据的键值对，也就是key : value，当然，每一句都必须以分号（；）结束，切记，没有分号会出问题的。 其实类似 json …
简述什么是css以及css的作用（详解css概念和作用）
聊起css，印象最深刻的就是刚毕业那会刚开始从事前端开发岗位工作的时候，身为一名 cut picture boy(切图仔)，在页面布局及还原设计图中广泛使用css来开发页面，我记得…
什么是css样式及作用（css特效样式知识解析）
上几节我们把HTML相关的必要知识点给大家已经讲完，剩下的细节大家可以查阅资料再进行深入研究。从这一节开始，我们正式进入CSS的学习，在学习之前我们先介绍几个概念。 第一，什么是C…
css新特性有哪些（详细介绍css的9大新特性）
1、透明度 rgba和opacity都可以设置透明的。 rgba(red, green, blue, alpha)：alpha是0-1透明度，0时颜色为完全透明，1是完全不透明。 …
超出显示省略号兼容写法（css文字溢出变省略号）
说说css最常见的知识，实现单行、双行文本溢出显示省略号！如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度wi…
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。