我正在尝试创建一个显示每个单独列表项的所有内容的大型菜单。您可以将其视为一个简单/传统的下拉菜单,但是所有子元素在悬停时都是可见的。
我已将它们全部显示出来,但是我试图弄清楚如何扩展下拉菜单背景以扩展浏览器的整个宽度。
我尝试扩展最后一个子菜单,但效果不佳。
这里是片段:
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> </a>
<div className="subnav-block">
<ul>
<li>
<a> </a>
</li>
<li>
<a> </a>
</li>
</ul>
</div>
</li>
关于javascript - 将下拉菜单的背景扩展到浏览器的全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56978658/