【解决】CSS下拉菜单不会显示的问题

导航栏的下拉菜单不会显示，但按 F5 刷新的一瞬间又能看见下拉菜单的内容，但就是不会显示出来，一开始以为是 js 代码写错或者 css 动画函数的影响，后面找到一篇博客，说这是老生常谈的问题，对于小白确实很难找到问题关键，折腾一晚上终于发现是层叠关系的错误。

首先，我们必须理解层叠关系满足的两个条件：

1. 必须同级；

2. 二者分别设定了 position:relative 或 absolute 或 fixed；这时候通过设置 z-index 才有效。

下面看本人犯的错误：

由上图可见，鼠标移动到元素上下拉菜单不会显示出来，但刷新一瞬间又能显示出来。

原因就是下面的盒子 box 设置了  position:relative ，层叠掉了上面下拉菜单的样式。

 把 box 的 position:relative 删除掉，就能显示出下拉菜单：

效果：

另外还有一种情况：

导航下拉菜单显示不全是因为外层设置了 overflow:hidden

很多时因为网页比较复杂，层级比较多，所以经常忽略了外层或者外外外层设置了overflow:hidden导致导航下拉菜单显示不全，其实只要仔细查找就能解决问题，把overflow:hidden去掉，如果需要清除浮动，可以用其它方法，百度css清除浮动就有了。