纯 CSS 弹出子菜单

本文主要分为两块来写，首先说一下纯 CSS 实现弹出子菜单的原理，接着是一个例子。

一、实现原理

本文试图实现的弹出子菜单是，当鼠标经过菜单项时，子菜单就自动弹出来。实现这一功能的关键技术是使用“：hover”伪类。我们都知道，“：hover”可以实现改变元素的背景、字体、鼠标状态等元素自身的样式。其实，它也可以实现改变子元素的样式。

例如，请看下面的情况：

使用第一层 ul 的 li 元素的伪类“：hover”是可以实现修改其子元素的样式的。其语法格式如下：

当然，这只是举个例子，其它的有类似结构的元素也是可以实现的。本文实现弹出子菜单的技术关键就是这一个样式了。

二、一个例子

实现效果：

实现代码如下：

（完）