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

Question

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

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

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

Codepen for full code

以下代码段：

HTML

<nav class="main-nav">
      <ul className="nav">
        <li>
          <a>Products</a>

          <div className="subnav-block">
            <ul>
              <li>
                <a>Product A</a>
              </li>
              <li>
                <a>Product B</a>
              </li>
            </ul>
          </div>
        </li>
    </ul>
</nav>

CSS

.subnav-block {
  position: static;
  display: block;
  width: 100% !important;
  top: 54px;
  left: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background: gray;
  -webkit-transition: all 0.3s ease 0.15s;
  -moz-transition: all 0.3s ease 0.15s;
  -o-transition: all 0.3s ease 0.15s;
  -ms-transition: all 0.3s ease 0.15s;
  transition: all 0.3s ease 0.15s;
}

.nav .subnav-block {
  float: none;
  width: 200px;
}

Answer 1

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

.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>

Answer 2

您可以添加以下内容：

.nav .subnav-block {
    width: 100vh;
}