hover导航栏指定项时显示对应关联div不生效怎么办

三处代码写法问题直接导致交互不触发，逐一修正即可正常运行：

• HTML id属性值错误：写div的id时把CSS选择器专用的#符号直接嵌入了属性值，<div class="nav-menu" id="#nav-menu2">对应的DOM元素id是带#的字符串，和CSS选择器里写的#nav-menu2完全无法匹配。正确写法是把id值调整为nav-menu2，去掉前面多写的#。
• CSS选择器嵌套逻辑不成立：原代码写的#navigation-item2:hover #nav-menu2的选择规则是「找到id为navigation-item2的元素被hover时，其内部嵌套的后代元素id为nav-menu2的节点」，但实际DOM结构里nav-menu2是和导航栏<nav>平级的独立div，并非navigation-item2的子元素，永远无法选中目标。
• 绝对定位缺少偏移参考：.nav-menu设置了绝对定位，但没有指定top偏移值，就算选择器匹配成功，元素也会默认定位到页面最顶端，和导航栏位置错位。

不需要挪动现有HTML元素的位置，借助现代浏览器通用支持的:has()选择器即可实现需求：

1. 修正HTML中错误的id值：

   <div class="nav-menu" id="nav-menu2">
   

2. 调整补充CSS规则：

   /* 给header加定位基准，让绝对定位的菜单相对于header对齐 */
   header {
     position: relative;
   }
   
   .nav-menu {
     height: 200px;
     position: absolute;
     width: 100%;
     max-height: 25vh;
     opacity: 0;
     /* 把菜单定位在导航栏正下方，匹配原导航栏的最大高度 */
     top: 20vh;
     /* 加透明度过渡，避免显示/隐藏生硬跳变 */
     transition: opacity 200ms linear;
     background: white;
   }
   
   /* 触发规则：当header内的#navigation-item2被hover，或菜单本身被hover时，保持菜单显示 */
   header:has(#navigation-item2:hover) #nav-menu2,
   #nav-menu2:hover {
     opacity: 1;
   }
   

   这套写法同时解决了“鼠标从导航项移到下拉菜单的间隙，菜单突然消失”的体验问题，全程不需要改动原有HTML的元素层级。

如果需要兼容不支持:has()的老旧浏览器，只需要微调DOM结构，就能用你原本熟悉的基础:hover语法实现：

1. 把下拉菜单的div挪到#navigation-item2的内部作为子元素：

   <a class="navigation-item" id="navigation-item2" href="https://www.amazon.com">
     Produkte
     <div class="nav-menu" id="nav-menu2">
       <!-- 原有菜单列表内容保持不变 -->
     </div>
   </a>
   

2. 调整菜单定位规则，让它保持全宽显示：

   .nav-menu {
     /* 因为父级navigation-item已经设置了position: relative，调整定位参数即可实现全宽 */
     left: calc(50% - 50vw);
     width: 100vw;
     top: 100%;
     /* 原有opacity、transition等属性保持不变 */
   }
   

   此时你原本写的选择器#navigation-item2:hover #nav-menu2 {opacity:1}就能正常生效。

内容的提问来源于stack exchange，提问作者Michaela P.