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

Question

我不知道如何完美地表述我的问题，所以我做了一个(快速)示例来准确说明我的问题:http://jsfiddle.net/kn5GT/1/

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

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

这只能在 CSS 中实现，还是我必须在其中添加一些 js？

Answer 1

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

我修改了your fiddle (边框只是为了更好的视觉区分。)

我刚刚添加了以下规则:

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

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