导航栏悬停子菜单显示异常及层级覆盖需求排查

嘿，我来帮你搞定这两个问题！先看你的代码，有两个核心问题导致了当前的状况，我一步步给你拆解：

一、悬停时子菜单不显示的原因及修复 #

你现在的CSS选择器 .nav-hover:hover .subnav 是在找.nav-hover元素内部的.subnav，但看你的DOM结构，.subnav是和.navbar平级的（都在.header下面），并不是.nav-hover的后代元素，所以这个选择器根本找不到目标，自然不会生效。

这里有两种修复方案，你可以选适合自己的：

方案1：调整DOM结构（更推荐，符合语义化） #

把.subnav放到.nav-hover这个<li>里面，让它成为Parks导航项的子元素：

<div class="header">
  <div class="navbar">
    <ul class="main-nav">
      <li><a href="#"><img src="./assets/asset 0.png" alt=""></a></li>
      <li class="nav-part"><a href="#">Shop</a></li>
      <li class="nav-part nav-hover">
        <a href="#">Parks</a>
        <!-- 把subnav移到这里 -->
        <div class="subnav" id="subnav">
          <ul>
            <li>Link1</li>
            <li>Link2</li>
          </ul>
        </div>
      </li>
      <li class="nav-part"><a href="#">What's New</a></li>
    </ul>
  </div>
</div>

然后修改CSS，确保子菜单默认隐藏，悬停时显示：

.subnav ul {
  display: flex;
  gap: 20px;
  visibility: hidden;
  /* 加上绝对定位，避免影响主导航布局 */
  position: absolute;
  /* 让子菜单紧贴Parks选项下方 */
  top: 100%;
  left: 0;
  /* 加背景色避免和下方内容混淆 */
  background: white;
  padding: 15px;
}

.nav-hover:hover .subnav ul {
  visibility: visible;
}

/* 给.nav-hover加相对定位，让子菜单的绝对定位以它为基准 */
.nav-hover {
  position: relative;
}

方案2：不调整DOM，用兄弟选择器 #

如果不想改DOM结构，可以用CSS的兄弟选择器来控制，但要注意.subnav必须紧跟在.navbar后面（你的结构刚好符合）：

.subnav ul {
  display: flex;
  gap: 20px;
  visibility: hidden;
  position: absolute;
  /* 根据你的导航高度调整top值，让子菜单位置合适 */
  top: 60px;
  left: 0;
  background: white;
  padding: 15px;
}

/* 当.nav-hover被悬停时，控制同级.navbar后面的.subnav */
.navbar .nav-hover:hover ~ .subnav ul {
  visibility: visible;
}

/* 给.header加相对定位，让子菜单的绝对定位以它为基准 */
.header {
  position: relative;
}

二、让子菜单覆盖hero-slider的设置 #

要实现子菜单覆盖在hero-slider上面，核心是z-index层级控制：

1. 给.subnav（或者它的ul）设置一个足够大的z-index值，比如z-index: 999;
2. 确保hero-slider的z-index值比这个小（如果它没设置z-index，默认会比有定位且设置了z-index的元素低）

修改后的CSS可以加上：

.subnav ul {
  /* 其他样式不变 */
  z-index: 999;
}

这样调整后，悬停Parks时子菜单会正常显示，并且能覆盖在hero-slider上面啦！

备注：内容来源于stack exchange，提问作者Shraddha Gupta