菜单结构中跨<li>的.subsubmenu触发.hide显示的CSS选择器问题

问题根源 #

你原有的CSS使用了相邻兄弟选择器+，但.subsubmenu和.hide的层级完全不匹配：.subsubmenu在.column2的<li>内部，而.hide在独立的.column3列表里，两者没有直接或间接的兄弟关系，所以原选择器根本无法定位到目标元素。

解决方案 #

要实现需求，需要借助:has()选择器（主流浏览器已支持）检测后代元素的hover状态，再结合相邻兄弟选择器定位到目标容器：

修正后的CSS代码

#menu .hide {
  display: none;
  width: 200px;
  height: 320px;
}

/* 当.column2内的.subsubmenu被hover时，显示相邻.column3里的.hide */
#menu .column2:has(.subsubmenu:hover) + .column3 .hide {
  display: block;
}

修正HTML结构（符合规范）

<ul>的直接子元素必须是<li>，需把.hide包裹到<li>中：

<ul class="column3">
  <li>
    <div class="hide"> <img src="ddmenu/img1.jpg"> </div>
  </li>
</ul>

原理说明 #

1. :has(.subsubmenu:hover)：选中包含被hover的.subsubmenu的.column2容器
2. + .column3：选中.column2的直接相邻兄弟元素.column3
3. .hide：最终定位到.column3内部的目标元素

如果需要兼容不支持:has()的旧版浏览器，可通过JavaScript辅助实现，但纯CSS方案优先推荐上述写法。

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