想象一下,我们有一个水平下拉菜单,其结构如下:
<ul class="root">
<li class="root-item">
<ul class="submenu">
<li></li>
<li></li>
<li></li>
</ul>
</li>
...
<li class="root-item">
<ul class="submenu">
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
CSS大致是这样的:
.root-item{
position:relative;
display:inline-block;
}
.submenu{
position:absolute;
top:-1000px;
}
.root-item:hover .submenu{
top:100%;
}
这里的问题是:如果某些(比如最后一个).submenu 足够宽,它可能会超出 .root 边界,并最终超出视口(如果 .root 的宽度是 VP 的 100%)。
我想要的是使 .submenu-s 适合 .root; 这意味着.sumbenu的左右不会变成负数。但是 - 使用纯 css,非常好奇,是否可以在这里跳过使用 javascript。所需的结果就像这里的功能区菜单。那可能吗?
谢谢!