display:none对列表项不生效及overflow:hidden相关技术问题咨询

1. 下拉菜单始终显示、不受hover控制的原因 #

你的CSS里写了 .up-head ul { display: flex; }，这是后代选择器，会匹配.up-head内部所有层级的<ul>元素——包括嵌套在.dropdown里的.dropdown-menu。

按照CSS优先级规则，.up-head ul（类选择器+元素选择器，权重11）的优先级高于.dropdown-menu（类选择器，权重10），所以display:flex会直接覆盖你给.dropdown-menu设置的display:none，导致下拉菜单一直处于显示状态，hover自然起不了作用。

2. 注释掉overflow:hidden后列表项不可见的原因 #

假设你之前给header添加了overflow:hidden：

• 当header有overflow:hidden时，内部绝对定位的.dropdown-menu即使超出header范围，也会被限制在header的可视区域内，所以能正常显示；
• 注释掉overflow:hidden后，.dropdown-menu会脱离header的裁剪范围，但你给header设置了z-index:100，而.dropdown-menu的z-index:1，优先级远低于header，下拉菜单会被header完全遮挡，看起来就像不可见了。

修复方案 #

解决下拉菜单不受hover控制的问题 #

把.up-head ul改成子选择器，只作用于.up-head的直接子元素<ul>，避免影响嵌套的下拉菜单：

.up-head > ul {
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 18px;
  font-weight: 800;
}

解决注释overflow:hidden后菜单不可见的问题 #

提高.dropdown-menu的z-index，确保它能显示在header上方：

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 101; /* 数值大于header的z-index */
  background-color: #f9f9f9;
}

另外可以补充下拉菜单的基础样式，让显示更合理：

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 101;
  background-color: #f9f9f9;
  padding: 0;
  min-width: 120px;
  list-style: none;
}
.dropdown-menu li {
  padding: 8px 12px;
  white-space: nowrap;
}

内容的提问来源于stack exchange，提问作者Md. Istiak Hossain