鼠标hover指定元素时导航列表显示失效问题求助

核心问题是CSS选择器匹配错误：
你写的.icon:hover .top是在选择.icon的子元素中的.top，但从HTML结构看，.top是.nav-bar的子元素，和.icon是同级关系，这个选择器根本找不到目标元素，所以hover时样式不会生效。

另外还有个细节问题：.top是绝对定位，但它的父元素.nav-bar没有设置position: relative，这样.top会相对于整个文档定位，可能导致显示位置不符合预期。

解决方案 #

方法1：使用同级元素选择器（无需修改HTML） #

如果不想调整HTML结构，把hover的CSS选择器改成同级元素匹配的写法：

• 如果.nav-bar是.icon的直接下一个同级元素，用相邻兄弟选择器+：

.nav-bar {
  position: relative; /* 给父元素加相对定位，让子元素absolute相对于它定位 */
}

.nav-bar .top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: -500%;
  left: 0;
  width: 100%;
  background: rgb(238 238 238 / 88%);
  transition: var(--main-transition);
  -webkit-transition: var(--main-transition);
  -moz-transition: var(--main-transition);
  -ms-transition: var(--main-transition);
  -o-transition: var(--main-transition);
}

.icon:hover + .nav-bar .top {
  top: 100%;
}

• 如果.nav-bar在.icon后面但不是直接相邻，用通用兄弟选择器~：

.icon:hover ~ .nav-bar .top {
  top: 100%;
}

方法2：调整HTML结构（把.nav-bar放到.icon内部） #

如果布局允许，把.nav-bar作为.icon的子元素，这样原来的选择器就能生效：

<div class="icon">
  <span></span>
  <span></span>
  <span></span>
  <div class="nav-bar">
    <ul class="top">
      <li><a href="#home">home<span></span></a></li>
      <li><a href="#about">about<span></span></a></li>
      <li><a href="#services">services<span></span></a></li>
      <li><a href="#portfolio">portfolio<span></span></a></li>
      <li><a href="#pricing">pricing<span></span></a></li>
      <li><a href="#experience">experience<span></span></a></li>
    </ul>
  </div>
</div>

同时记得给.icon加上position: relative，让.top相对于它定位。

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