多级下拉菜单CSS hover失效、空白项及visibility属性问题求助

问题1：二级菜单hover触发失效修复 #

这个问题通常由两个原因导致：CSS选择器未正确关联父元素hover状态与子菜单，或是元素间存在空白间隙，导致鼠标移至子菜单时父元素hover状态丢失。

修复步骤：

• 使用嵌套选择器关联父元素hover与子菜单显示，针对三级菜单的示例：

  /* 一级菜单hover时显示二级菜单 */
  .nav-item.services:hover .submenu {
    display: block; /* 或搭配visibility使用 */
  }
  /* 二级菜单hover时显示三级菜单 */
  .submenu li.has-submenu:hover .sub-submenu {
    display: block;
  }
  

• 消除元素间隙：给父容器设置font-size: 0;（解决inline-block元素的空白字符间隙），子元素再重置font-size: 16px;；或者直接移除HTML中li/ul标签间的换行空格。

问题2：二级菜单顶部空白选项移除 #

空白选项要么来自HTML结构中的空<li>标签，要么是ul/li的默认内外边距导致。

修复步骤：

1. 检查HTML代码，删除所有空的<li>或多余嵌套的<ul>标签：

   <!-- 错误示例：包含空li -->
   <ul class="submenu">
     <li></li>
     <li><a href="#">Climate Policy & Sustainability</a></li>
   </ul>
   <!-- 修正后 -->
   <ul class="submenu">
     <li><a href="#">Climate Policy & Sustainability</a></li>
   </ul>
   

2. 重置ul的默认样式，消除默认边距与列表符号：

   .submenu {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   

问题3：visibility:hidden无法生效修复 #

visibility属性生效的前提是元素本身display不为none，如果之前混用了display:none，会导致visibility设置失效。

修复方案：

• 统一用visibility控制显示隐藏，配合absolute定位避免占据页面空间：

  /* 默认隐藏二级菜单 */
  .submenu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease; /* 可选：添加过渡动画 */
  }
  /* hover时显示 */
  .nav-item.services:hover .submenu {
    visibility: visible;
    opacity: 1;
  }
  

完整示例代码 #

HTML结构

<nav class="main-nav">
  <ul>
    <li class="nav-item">Home</li>
    <li class="nav-item services">
      Services
      <ul class="submenu">
        <li class="has-submenu">
          <a href="#">Climate Policy & Sustainability</a>
          <ul class="sub-submenu">
            <li>Policy Consulting</li>
            <li>Sustainability Reports</li>
          </ul>
        </li>
        <li>Energy Solutions</li>
      </ul>
    </li>
  </ul>
</nav>

CSS样式

.main-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  background: #f0f0f0;
}

.nav-item {
  padding: 1rem;
  position: relative;
  cursor: pointer;
}

.submenu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  transition: opacity 0.3s ease;
}

.submenu li {
  padding: 0.8rem 1.2rem;
  white-space: nowrap;
  position: relative;
}

.sub-submenu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 100%;
  background: #fff;
  border: 1px solid #ddd;
  transition: opacity 0.3s ease;
}

.nav-item.services:hover .submenu {
  visibility: visible;
  opacity: 1;
}

.submenu li.has-submenu:hover .sub-submenu {
  visibility: visible;
  opacity: 1;
}

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