CSS :hover伪类不生效如何解决？附对应HTML与CSS代码

问题原因排查 #

你的:hover伪类不生效核心是CSS选择器匹配关系和HTML结构不对应：

• 你写的#Home:hover #Homesub选择器规则是「选中id为Home的元素内部的id为Homesub的元素」，但从HTML结构来看，id为Home的a标签和包裹Homesub的ul是同级关系，#Homesub根本不在#Home的内部，所以触发hover时完全匹配不到要显示的元素
• 就算修改选择器让hover触发显示，直接把hover事件绑定在a标签上也会有交互问题：鼠标移动到下拉选项的过程中会离开a标签，导致下拉菜单直接消失
• 你目前只设置了#Homesub这个a标签的display属性，它外层的ul、li标签默认还是会占据布局空间，隐藏逻辑不完整

修复方案 #

把hover触发绑定在Home对应的li父元素上，直接控制整个子菜单ul的显隐即可，修改后的代码如下：

html {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: black;
}

.nav_bar>li {
  padding: 20px;
  flex-basis: 0;
  flex-grow: 1;
  background-color: #ffffa8;
  /* 新增相对定位方便子菜单定位，避免影响其他元素布局 */
  position: relative;
  height: 1rem;
  text-align: center;
  flex-direction: column;
}

/* 直接隐藏整个子菜单 */
.nav_bar .sub {
  display: none;
  /* 绝对定位调整子菜单展示位置，可按需修改参数 */
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 父级li hover时显示子菜单 */
.nav_bar>li:hover .sub {
  display: block;
}

<nav>
  <ul class="nav_bar">
    <li>
      <a href="Home.html" id="Home">Home</a>
      <ul class="sub">
        <li><a href="Members.html" id="Homesub">Members</a></li>
      </ul>
    </li>
  </ul>
</nav>

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