Javascript 将下拉菜单的背景扩展到浏览器的全宽

我试图创建一个大菜单，显示每个列表项的所有内容。您可以将其视为一个简单/传统的下拉列表，但当鼠标悬停时，所有子项都是可见的

我已经把它们全部显示出来了，但是我正在试图弄清楚如何扩展下拉菜单背景以扩展浏览器的整个宽度

我尝试扩展最后一个子菜单，但效果不太好

以下是一些片段：

HTML

---

您可以添加以下内容：

.nav.subnav块{
宽度：100vh；
}

---

您可以添加以下内容：

.nav.subnav块{
宽度：100vh；
}

您可以添加（更改）样式：

并添加一个虚拟的最后一个菜单项，将宽度扩展到最大：

        <li>
          <a>&nbsp;</a>

          <div className="subnav-block">
            <ul>
              <li>
                <a>&nbsp;</a>
              </li>
              <li>
                <a>&nbsp;</a>
              </li>
            </ul>
          </div>
        </li>

您可以添加（更改）样式：

并添加一个虚拟的最后一个菜单项，将宽度扩展到最大：

        <li>
          <a>&nbsp;</a>

          <div className="subnav-block">
            <ul>
              <li>
                <a>&nbsp;</a>
              </li>
              <li>
                <a>&nbsp;</a>
              </li>
            </ul>
          </div>
        </li>


只需使用
宽度：100vw
查看您的
和
元素。我相信正是这些因素之一导致了这一问题。由于subnav块位于
元素内，您需要查看哪个父元素限制其宽度。只需使用
宽度：100vw
查看您的
和
元素。我相信正是这些因素之一导致了这一问题。由于subnav块位于
元素内，因此需要查看哪个父级限制其宽度。
.nav { display:flex; }
.nav > li:last-child { flex: 1; }

        <li>
          <a>&nbsp;</a>

          <div className="subnav-block">
            <ul>
              <li>
                <a>&nbsp;</a>
              </li>
              <li>
                <a>&nbsp;</a>
              </li>
            </ul>
          </div>
        </li>