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

标签 javascript html css reactjs

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

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

我尝试扩展最后一个子菜单,但效果不佳。

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;
}

最佳答案

您可以添加(更改)样式:

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

screenshot

关于javascript - 将下拉菜单的背景扩展到浏览器的全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56978658/

相关文章:

javascript - 在一页上渲染同一张谷歌地图两次

javascript - 在框架ui 'badge'中将 'panel'设置为 `ant design`

javascript - 添加事件监听器

移动设备中的 css 响应式设计不起作用

javascript - 如何触发附加到我的页面的内联 Javascript? (ASP.NET 网络表单)

java - 通过多个类名查找 div 元素?

javascript - 将元素动态推送到数组jquery

android - Ionic v2 html 根本不呈现( Angular 2)

javascript - 将文本区域输入字符串转换为类型对象

javascript - 以编程方式在 JavaScript 中获取和设置 jssor 的索引