导航栏的下拉菜单不会显示，但按 F5 刷新的一瞬间又能看见下拉菜单的内容，但就是不会显示出来，一开始以为是 js 代码写错或者 css 动画函数的影响，后面找到一篇博客，说这是老生常谈的问题，对于小白确实很难找到问题关键，折腾一晚上终于发现是层叠关系的错误。
首先，我们必须理解层叠关系满足的两个条件：
1. 必须同级；
2. 二者分别设定了 position:relative 或 absolute 或 fixed；这时候通过设置 z-index 才有效。
下面看本人犯的错误：
由上图可见，鼠标移动到元素上下拉菜单不会显示出来，但刷新一瞬间又能显示出来。
原因就是下面的盒子 box 设置了 position:relative ，层叠掉了上面下拉菜单的样式。
把 box 的 position:relative 删除掉，就能显示出下拉菜单：
效果：
另外还有一种情况：
导航下拉菜单显示不全是因为外层设置了 overflow:hidden文章来源：https://www.toymoban.com/news/detail-452543.html
很多时因为网页比较复杂，层级比较多，所以经常忽略了外层或者外外外层设置了overflow:hidden导致导航下拉菜单显示不全，其实只要仔细查找就能解决问题，把overflow:hidden去掉，如果需要清除浮动，可以用其它方法，百度css清除浮动就有了。文章来源地址https://www.toymoban.com/news/detail-452543.html
到了这里，关于【解决】CSS下拉菜单不会显示的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
