为何我的ul hover效果不生效？如何实现悬停显示子菜单

我正在制作一个导航菜单，希望鼠标悬停在categories选项上时，下方弹出子菜单。我已创建主菜单和子菜单，但无法实现悬停时显示子菜单，也无法对其设置样式。我尝试了以下几种CSS选择器：

• nav li.categories:hover .categories-ul
• .categories:hover .categories-ul
• .categories:hover nav .categories-ul

但均不起作用，请问该如何解决？

相关代码 #

HTML #

<nav class="pc-nav">
  <ul class="pc-nav-ul">
    <li class="pc-nav-li"><a href="#">home</a></li>
    <li class="pc-nav-li categories"><a class="categories" href="#">categories</a>
    </li>
    <li class="pc-nav-li"><a href="#">setting</a></li>
    <li class="pc-nav-li"><a href="#">login/sign up</a></li>
  </ul>
  <ul class="categories-ul">
    <li class="categories-li"><a href="">entertainment</a></li>
    <li class="categories-li"><a href="">literature</a></li>
    <li class="categories-li"><a href="">science</a></li>
    <li class="categories-li"><a href="">programming</a></li>
    <li class="categories-li"><a href="">programming</a></li>
    <li class="categories-li"><a href="">programming</a></li>
  </ul>
</nav>

CSS #

.pc-nav-ul {
  width: 50%;
  display: flex;
  justify-content: space-between;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  backdrop-filter: hue-rotate(100deg) blur(5px);
}

.pc-nav-li {
  font-size: 1.5rem;
  font-family: var(--text-font);
  padding: 1rem;
  transition: 600ms;
}

.categories-ul {
  backdrop-filter: hue-rotate(140deg) blur(20px);
  padding: 0.7rem;
  border-radius: 1rem;
  width: 45rem;
  display: flex;
  justify-content: space-evenly;
  position: fixed;
  top: 5rem;
  z-index: 99999;
  transition: 600ms;
}

nav li.categories:hover .categories-ul {
  background-color: red;
}

.categories-li {
  font-family: var(--text-font);
  font-size: 1.2rem;
}

.pc-nav-li:hover:not(.categories-li) {
  letter-spacing: 2px;
}

问题根源 #

你的子菜单.categories-ul和触发元素.categories是同级关系（同属<nav>的子元素），但你使用的选择器都是基于触发元素的后代元素进行定位，自然无法选中目标子菜单。

解决步骤 #

1. 先给子菜单添加默认隐藏样式 #

要实现"弹出"效果，首先得让子菜单默认隐藏：

.categories-ul {
  /* 保留原有所有样式 */
  display: none; /* 新增：默认隐藏子菜单 */
}

2. 使用兄弟选择器定位子菜单 #

因为触发元素和子菜单是同级，需要用通用兄弟选择器(~)来选中悬停状态下的子菜单：

/* 当鼠标悬停在categories选项上时，显示同级的子菜单 */
nav li.categories:hover ~ .categories-ul {
  display: flex;
  background-color: red;
}

3. 优化：鼠标移到子菜单上保持显示 #

上面的写法存在一个问题：鼠标从categories选项移到子菜单上时，子菜单会立刻消失。可以给子菜单添加悬停保持显示的样式：

/* 鼠标停在子菜单上时，保持显示 */
.categories-ul:hover {
  display: flex;
}

完整修改后的CSS #

.pc-nav-ul {
  width: 50%;
  display: flex;
  justify-content: space-between;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  backdrop-filter: hue-rotate(100deg) blur(5px);
}

.pc-nav-li {
  font-size: 1.5rem;
  font-family: var(--text-font);
  padding: 1rem;
  transition: 600ms;
}

.categories-ul {
  backdrop-filter: hue-rotate(140deg) blur(20px);
  padding: 0.7rem;
  border-radius: 1rem;
  width: 45rem;
  display: flex;
  justify-content: space-evenly;
  position: fixed;
  top: 5rem;
  z-index: 99999;
  transition: 600ms;
  display: none; /* 默认隐藏 */
}

nav li.categories:hover ~ .categories-ul {
  display: flex;
  background-color: red;
}

.categories-ul:hover {
  display: flex;
}

.categories-li {
  font-family: var(--text-font);
  font-size: 1.2rem;
}

.pc-nav-li:hover:not(.categories-li) {
  letter-spacing: 2px;
}

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