html - 如何避免垂直下拉菜单在底部添加垂直滚动条？

Question

我不知道如何完美地提出我的问题，所以我做了一个（快速）示例，以便准确说明我的问题：http: //jsfiddle.net/kn5GT/1/

如果最后一项靠近底部并且您将其悬停，则子菜单将像其他一样显示，但这会扩展页面的高度，从而显示浏览器的垂直滚动条。

我想避免这种情况，方法是通过不是从上显示，而是从底部显示（子菜单的底部将接近末尾）来扩展页面高度的所有下拉菜单。

这是否只能在 CSS 中实现，还是我必须在其中放入一些 js？

Answer 1

这可能不是最好的解决方案，但您可以在 css-pseudoclass 的帮助下解决这个问题nth-last-of-type()。

我修改了你的小提琴（边框只是为了更好的视觉区分。）

我刚刚添加了以下规则：

ul>li:nth-last-of-type(-n+2)>div {
    top:auto;
    bottom: 50px;
}

不要被奇怪的选择器弄糊涂了，本质上是(-n+2)让最后 2 个子菜单从底部弹出而不是从顶部弹出。