鼠标悬停超链接时二级嵌套列表不显示？CSS ID实现子菜单悬停显示

API 探路者

2026-5-25

问题：鼠标悬停超链接时，二级嵌套列表项为何无法显示？

问题根源分析

你当前的CSS逻辑踩了一个选择器匹配的坑：

你的子菜单<ul id="Submenu">是和<a id="HyperLink">同级的元素，并不是它的子元素
但你写的ul#topmenu li a#HyperLink:hover ul，是在试图选中<a>标签hover状态下的子级<ul>，这个选择器根本匹配不到目标的子菜单，所以自然不会有任何显示效果

解决方案（纯CSS实现，无JS/JQuery，完全基于ID）

我们需要调整CSS选择器的逻辑，用两种可行的方式来触发子菜单显示：

方式1：直接通过`<a>`的hover状态 + 兄弟选择器触发

完全贴合你要求的“悬停French链接时显示子菜单”的需求：

/* 当id为HyperLink的链接被hover时，选中它后面的同级Submenu元素 */
a#HyperLink:hover + #Submenu {
  background-color: pink;
  display: block; /* 用block而非list-item，ul本身是块级元素，这样显示更合理 */
}

方式2：通过父`<li>`的hover状态触发（更稳定）

如果希望鼠标从链接移到子菜单上时，子菜单不会突然消失，推荐用这种方式：

/* 当包含链接的父li被hover时，显示内部的Submenu */
ul#topmenu li.langHorzMenu:hover #Submenu {
  background-color: pink;
  display: block;
}

修改后的完整代码示例

<style>
/* 二选一即可，推荐方式2 */
/* 方式1代码 */
a#HyperLink:hover + #Submenu {
  background-color: pink;
  display: block;
}

/* 方式2代码（可选，体验更优） */
/* ul#topmenu li.langHorzMenu:hover #Submenu {
  background-color: pink;
  display: block;
} */
</style>

<ul id="topmenu">
 <li class="langHorzMenu">
 <a href="#" id="HyperLink">French</a>
 <ul id="Submenu" style="display:none;">
 <li>
 <a href="#">News</a>
 </li>
 </ul>
 </li>
</ul>