Html 根据页面宽度调整Mega菜单的大小并使其居中

我正在尝试制作一个超大菜单，它将是标题的宽度，也将居中到中间。收割台的最大宽度为1024px。但是，下拉菜单始终从父li的边缘开始。我设法用利润率解决了这个问题，但这无论如何都不是一个永久的解决办法。为了这个问题，我去掉了页边空白

HTML

下面是一个JSFIDLE来了解这个想法：

---

更新1：解释有点混乱。

好的，我想我有办法解决你的问题。根据我的理解，您希望隐藏的div在悬停时显示，并占据整个屏幕的宽度。对吗？为此：

首先，当导航li div悬停时，将固定位置和左边距0添加到导航li div中。i、 e:

.nav > li:hover > div { display: block;
                        position: fixed;
                        left: 0}

更改nav li DIV的最大宽度以包含整个屏幕。i、 e:

.nav > li > div {
position: absolute;
top: 114px;
display: none;
background: #F7F7F7;
padding: 10px 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
overflow: hidden;
border-bottom: 4px solid $primary-color;
border-left: 1px solid $header-border;
border-right: 1px solid $header-border;
z-index: 2;
max-width: 1800px;
height: auto;
margin: 0 auto;
}

---

问题是UL有一定的宽度。下拉菜单的大小与UL相同，这意味着如果我调整UL的大小，我应该得到相同的宽度。因此，任何有类似问题的人，请检查您的UL。

如果我没有很好地解释，我很抱歉。我想要的是隐藏的div是头的宽度，所以如果头是1024px，隐藏div的最大宽度应该是1024px，并且隐藏div应该在屏幕中间。我正在寻找一种方法来做到这一点。对我来说不是那么容易，至少lol，我可能会研究在永久位置对隐藏的div进行硬编码，然后使用javascript为悬停的每个li引入动态内容。你会接受使用javascript的想法，还是想坚持使用html和css？我很高兴我不是唯一一个对此感到困惑的人。好对于移动设备来说，这种导航也必须神奇地缩小尺寸。所以我更喜欢CSS/HTML，但如果没有选择，我想我可以做JS。。。我确实设法将它锁定在适当的位置，但当窗口缩小到一定的大小时，它又回到了绘图板上。也许可以用媒体查询的方式尝试一下？我想我可能有什么想法。如果我解决了这个问题，我会发布一个答案。

.nav > li:hover > div { display: block;
                        position: fixed;
                        left: 0}

.nav > li > div {
position: absolute;
top: 114px;
display: none;
background: #F7F7F7;
padding: 10px 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
overflow: hidden;
border-bottom: 4px solid $primary-color;
border-left: 1px solid $header-border;
border-right: 1px solid $header-border;
z-index: 2;
max-width: 1800px;
height: auto;
margin: 0 auto;
}