如何设置让下拉菜单(dropdown menu)显示在其他div元素的上层？

问题根因 #

你从W3Schools取的导航代码本身没有问题，下拉菜单被截断和z-index设置无关，是所有承载导航的父级元素都设置了overflow: hidden，该属性会直接裁剪超出元素自身尺寸范围的所有内容，不管子元素的z-index设到多高都无法突破父元素的显示边界。

需修改的CSS规则 #

你需要删除以下四个选择器中的overflow: hidden属性即可解决问题：

• .pagemenu
• .mainmenu
• .navbar
• .dropdown

如果你的页面不需要限制整体内容超出视口，也可以同时删除.fullpage的overflow: hidden属性，避免后续其他元素被意外裁剪。

修改后关键CSS参考 #

.pagemenu {
 position: absolute;
 left: 0;
 top: 160px;
 width: 100%;
 height: 56px;
 background-color: #202020;
 z-index: 1;
}

.mainmenu {
 margin: auto;
 width: 1200px;
 height: 56px;
 background-color: #000000;
 z-index: 2;
}

.navbar {
  background-color: #333;
}

.dropdown {
  float: left;
  z-index: 4;
}

内容的提问来源于stack exchange，提问作者anon