仅使用CSS实现导航栏菜单hover时显示全屏遮罩层的问题

问题根因 #

你当前使用的CSS选择器.header .container .row .links:hover .overlay的作用是选中.links元素内部的.overlay子元素，但你的HTML结构里.overlay是和<header>同级的独立元素，并不在.links内部，因此选择器无法匹配到遮罩层，导致悬浮时遮罩层不显示。
另外你当前的下拉菜单ul的z-index值为1，比遮罩层的z-index 10更低，不调整的话即使遮罩层显示也会盖住下拉菜单。

修复步骤 #

1. 修改悬浮触发遮罩层的CSS选择器
   将原有的触发样式替换为以下代码，使用CSS:has()选择器匹配包含悬浮状态.links的页面，即可选中同级的.overlay元素：

/* 替换原有这段代码 */
.header .container .row .links:hover ul,
body:has(.header .links:hover) .overlay{
    display: block;
}

如果需要兼容不支持:has()的旧版浏览器，也可以直接把.overlay元素放到.links容器内部，原有选择器就可以正常生效。

2. 调整下拉菜单的层级优先级
   修改ul的z-index属性，确保它在遮罩层上方显示：

.header .container .row .links ul {
    display: none;
    background-color: #000;
    position: absolute;
    min-width: 12.5em;
    right: 0;
    top: calc(100% + 15px);
    z-index: 11; /* 从原来的1改为11，比遮罩层的10更高 */
}

3. 补全遮罩层定位参数
   给.overlay补充top和left属性，避免部分场景下遮罩层位置偏移：

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    z-index: 10;
}

修改完成后悬浮导航栏即可同时显示下拉菜单和全屏遮罩层。

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