纯css实现三级菜单栏

之前已经介绍了如何使用纯css实现二级菜单栏，这里贴出那篇文章的链接： 纯css实现二级菜单栏，其实三级菜单栏就是在二级菜单栏的基础上实现的。

我们先做成这个样子：

可以看到，这里我们在“关于我们”——“我们的故事”下面添加了三级菜单，这个只需要在“我们的故事”这个li里面添加一个ul即可实现；

不过这里仍然存在着一个在二级菜单栏实现中已经提及的问题：

当我们把鼠标的光标从红框中的“故事3”位置移动到黄框所在位置时，红框中的元素会消失，黄框所在行的“我们的团队”会移动到蓝框所在位置，而一级菜单“服务”和“联系我们”则会移动到灰框所在位置，这时黄框所在位置也就是鼠标光标当前的位置没有任何元素了。也就是说，我们的鼠标光标从红框的“故事3”移动到黄框所在行的“我们的团队”时无法维持这一状态。

解决办法是做成下面这个样子：

也就是说让“故事1”“故事2”“故事3”的显示和隐藏对其他菜单的位置不产生影响。这个可以使用绝对定位来做到。

这里去掉了列表的默认样式，并加了边框。现在基本上已经解决了大部分问题，剩下的只有样式的微调和其他想添加的东西，就不再赘述了。

另外，附上代码参考：

html部分

用红框框起来的部分就是在二级菜单栏的基础上需要添加的部分

css部分