之前已经介绍了如何使用纯css实现二级菜单栏,这里贴出那篇文章的链接: 纯css实现二级菜单栏,其实三级菜单栏就是在二级菜单栏的基础上实现的。
我们先做成这个样子:
可以看到,这里我们在“关于我们”——“我们的故事”下面添加了三级菜单,这个只需要在“我们的故事”这个li里面添加一个ul即可实现;
不过这里仍然存在着一个在二级菜单栏实现中已经提及的问题:
当我们把鼠标的光标从红框中的“故事3”位置移动到黄框所在位置时,红框中的元素会消失,黄框所在行的“我们的团队”会移动到蓝框所在位置,而一级菜单“服务”和“联系我们”则会移动到灰框所在位置,这时黄框所在位置也就是鼠标光标当前的位置没有任何元素了。也就是说,我们的鼠标光标从红框的“故事3”移动到黄框所在行的“我们的团队”时无法维持这一状态。
解决办法是做成下面这个样子:
也就是说让“故事1”“故事2”“故事3”的显示和隐藏对其他菜单的位置不产生影响。这个可以使用绝对定位来做到。
这里去掉了列表的默认样式,并加了边框。现在基本上已经解决了大部分问题,剩下的只有样式的微调和其他想添加的东西,就不再赘述了。
另外,附上代码参考:
html部分
用红框框起来的部分就是在二级菜单栏的基础上需要添加的部分
css部分