纯css实现二级菜单栏

用纯css实现二级菜单的原理还是比较简单的，但是不亲自去实现一下碰到了一时半会还真不一定搞的定。

为了简单说明其核心原理，这里不多添加样式。

先上效果图：

1. 可以看到，结构是：首先建立一级菜单栏，使用一个无序列表既可以实现。
2. 然后再在一级菜单栏里面，每个需要添加二级菜单栏的菜单里面再添加一个用于表示二级菜单栏的无序列表。
3. 对一级菜单栏里面的单个菜单项目使用:hover即可以实现功能。新手可以自己按照这个思路试试，感觉困难请参考下面我提供的代码

附上我的代码参考：

html部分

css部分

怎么样，是不是很简单呀！

对了，这里还有一个小问题，请仔细看我在文章一开始处提供的效果图，为了方便观察再把图贴过来：

当我把鼠标移动到一级菜单栏的菜单“服务”里，再把鼠标移到其下面的二级菜单栏的菜单“程序开发”，再往下移动时，实际上鼠标是进入了当时一级菜单栏的菜单“联系我们”里，但是一下子全都收回去了，“联系我们”的二级菜单栏闪了一下里面消失了。这是由于:hover的特性，在离开:hover的元素时，这个:hover元素就不是:hover状态了，离开菜单"程序开发"时，我们也已经离开了它的父元素li，对它的:hover状态添加的样式也消失了，这样"服务"下的二级菜单栏就会消失，菜单"联系我们"也就随之位置发生改变，收回去了，这样菜单"联系我们"所在的li本该是:hover状态此时也由于位置的收缩而失去了:hover状态，因此它的二级菜单栏就会在出现一瞬间后立马消失了。

解决办法参考我写的纯CSS三级菜单栏，这里贴上链接：纯CSS实现三级菜单栏