html - 如果父元素不是全屏宽度，如何使子菜单跨越全屏？

Question

在 this site 的顶部，当您将鼠标悬停在解决方案、品牌等上时，会出现一个蓝色的下拉菜单。我希望它能占满整个页面的宽度，但即使我将该元素 (div.mega-dropdown-inner) 的宽度设置为 100%，它也只会填充其父元素的 100%，而不是全部页。

是否有相对简单的方法来完成此操作，或者我唯一的选择是先将父元素设置为 100% 宽度？

我想我想问的是...有没有办法告诉 CSS 我希望“宽度”参数以屏幕宽度为基础，而不是父元素宽度？就像某种覆盖。

我假设没有，但我想我会请一些更聪明的人来确定。

Answer 1

简单的 css 行就可以解决问题:

.mega-dropdown-menu {
    width: 100vw;
} 

通过将下拉菜单的宽度设置为视口(viewport)的大小，它将忽略其容器的宽度，并且可以仅通过 css 实现而无需定位 div。