CSS三级菜单问题求助：L3子菜单无法点击且移出即消失

问题描述 #

开发HTML菜单时遇到L3子菜单（Item-221、Item-222）的两个问题：

• 鼠标悬停Item-22时，L3子菜单可正常显示，但无法点击其中选项
• 鼠标移出Item-22后，L3子菜单立即消失

纯CSS解决方案 #

可以仅用CSS解决，核心是消除父元素与L3子菜单之间的间隙，同时确保hover状态覆盖子菜单交互区域。

问题根源

原代码中L3子菜单的left: calc(100% + 10px)设置了10px的间隙，当鼠标从Item-22移向子菜单时，会先脱离Item-22的hover范围，导致子菜单提前消失，无法完成点击操作。

修改后的CSS代码

ul {
  background-color: #c4c4c4;
  list-style-type: none;
  display: flex;
}
li {
  padding: 5px 10px 5px 10px;
  white-space: nowrap;
  position: relative;
}
li:hover {
  background-color: #02DB02;
}
.menu li>ul {
  padding: 10px 13px 10px 13px;
  position: absolute;
  display: none;
  top: calc(100%);
  left: -8px;
}
/* 改用通用hover选择器，替代ID绑定，扩展性更好 */
.menu li:hover > ul {
  display: block;
}
.menu>li>ul>li>ul {
  top: -0.5em;
  /* 移除+10px，让子菜单与父元素无缝衔接 */
  left: 100%;
}

关键修改说明

1. 消除间隙：将L3子菜单的left值从calc(100% + 10px)改为100%，让子菜单紧贴父元素Item-22的右侧，鼠标移动时不会触发父元素的hover状态丢失。
2. 通用hover选择器：用.menu li:hover > ul替代原有的ID绑定选择器，无需依赖特定ID，菜单层级扩展更灵活。

验证效果

修改后，鼠标悬停Item-22时L3子菜单正常显示；鼠标移向子菜单选项时，子菜单不会提前消失，可正常点击；只有当鼠标完全移出Item-22及子菜单区域后，子菜单才会消失。

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