li:hover 无效问题排查：鼠标悬停菜单链接无法显示子列表

看起来你踩了一个很常见的CSS选择器误区——你试图让已经隐藏的子菜单自己hover来显示，但子菜单默认是不可见的，根本触发不了hover事件呀！得让父级的<li>在hover时，控制它里面的子列表显示才行。

我先帮你补全并修正CSS代码，核心是调整hover的触发逻辑：

.menu {
  width: 100%;
  height: 50px;
  background-color: #222;
  font-family: 'Arial';
  /* 防止子菜单撑开父容器 */
  position: relative;
}

.menu ul {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0; /* 重置默认内边距，避免布局偏移 */
}

.menu ul li {
  width: 150px;
  float: left;
  position: relative; /* 为子菜单的绝对定位提供参考 */
}

.menu a {
  padding: 15px;
  display: block;
  color: #fff; /* 增加文字颜色，提升可读性 */
  text-decoration: none;
}

/* 关键：默认隐藏子菜单 */
.menu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%; /* 让子菜单贴在父li的底部 */
  left: 0;
  background-color: #333;
  padding: 0;
}

/* 核心修正：父li hover时，显示直接子ul */
.menu ul li:hover > ul {
  visibility: visible;
}

几个关键要点： #

• 子菜单必须设置position: absolute，不然会撑开父级布局，破坏导航栏的结构
• 父级<li>要加position: relative，让子菜单的绝对定位以它为参考点
• 选择器用li:hover > ul，这里的>是直接子元素选择器，确保只触发当前li的直接子菜单，避免多层菜单时的冲突
• 如果想用display: none/block代替visibility也可以，但visibility会保留元素占位，更适合做过渡动画

你之前写的.menu ul ul:hover完全没用，因为子菜单默认是隐藏的，用户根本碰不到它，自然触发不了hover。一定要把hover事件绑定在可见的父元素上！

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