Html 引导容器中桌面上的全宽mega菜单

我正在尝试创建一个位于导航列表元素中的超级菜单，但同时超级菜单需要跨越页面的整个宽度

我陷入这样的困境：超大菜单是相对于它的父菜单所在的位置而言的。 mega菜单与第一个导航项对齐，我希望它与整个页面的左边缘齐平

有没有非JS的解决方案

附件中的图片显示了我当前拥有的内容

标志


这需要全宽。




其他链接
.标题{
宽度：100%；
}
.集装箱{
背景色：#ccc；
最大宽度：500px；
左边距：自动；
右边距：自动；
}
美国海军{
显示：内联块；
}
李国荣先生{
显示：块；
浮动：左；
右边距：20px；
}
李丽娜先生{
背景色：#888；
颜色：#fff；
}
.nav.mega菜单{
背景色：#aaa；
显示：块；
高度：500px；
位置：绝对位置；
顶部：35px；
宽度：100vw；
}

将这两行添加到.nav.mega菜单的css中：

.nav .mega-menu {
  position: fixed;
  left: 0px;
}

jsfiddle： 您可以在CSS的.nav中添加“position:static；”。绝对定位的元素将“卡”在任何非静态定位的父母体内。

多谢，这“修复”了我的烦恼！

.nav .mega-menu {
  position: fixed;
  left: 0px;
}