CSS下拉菜单被顶部导航栏截断的问题求助

问题根源 #

• 顶部导航栏的overflow: hidden会将所有超出其容器范围的内容裁剪掉，这直接导致下拉菜单被截断
• 下拉菜单设置了z-index: -1，会让它处于导航栏（z-index:100）的下方，被导航栏遮挡

修复方案 #

1. 修改导航栏的overflow属性 #

移除或修改.topnav的overflow: hidden，因为这个属性会隐藏所有超出导航栏的内容：

.topnav {
  background-color: #332B33;
  overflow: visible; /* 替换原来的overflow:hidden */
  border-bottom: 5px solid black; 
  font-family: Arial, Helvetica, sans-serif;
  position: sticky;
  height: auto;
  z-index: 100;
  box-shadow: 0 2px 4px -2px;
}

2. 调整下拉菜单的层级与定位 #

• 给下拉菜单的父元素.dropdown添加position: relative，确保下拉菜单相对于父元素定位
• 把下拉菜单的z-index设置为比导航栏更高的数值，避免被遮挡：

.dropdown {
  float: left;
  overflow: hidden;
  position: relative; /* 新增相对定位 */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 101; /* 设置比导航栏z-index更高的值 */
}

这样修改后，下拉菜单就能完整显示，不会被导航栏截断或遮挡。

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