实现效果如下：

鼠标未移上前

鼠标未移上前

html下拉菜单属性纯CSS实实际用的常见下拉菜单后果 React

鼠标移上后

鼠标移上后

从效果图可以看出，当鼠标移上去的时候，会弹出下拉的菜单层！
假如在JQuery中，实现事理也蛮大略，便是当鼠标触发移上去事宜，弹层就显示（默认隐蔽）的事理！
而在CSS实现该效果会用到的事理便是CSS3的动画透明度过渡显示。
由于效果图中也有几个三角形图标，以是统一用CSS和CSS3的知识来实现比较随意马虎。
下面首先看看html的构造：如下：

布局的CSS：

右边实心的三角形可以用伪类元素 :after来实现.

鼠标移上去，各种变革的样式，个中当鼠标移上去时候，弹出层的透明度变为1，就可以看到内容

当弹层涌现后，第一行会有一个三角形指向，实现该三角形可以用到伪类:first-child:before，如下

结合起来就能完成纯CSS做下拉菜单效果！
想学更多知识，欢迎关注“恒星网络”头条号！