jquery - 绝对位置元素导致网站旁边出现不需要的空白

Question

晚上好，我的下拉菜单有问题。

因为我不知道如何用可以理解的英语来解释我的问题，所以我将从我的代码开始，这样您就可以明白我在说什么。 (它在 JSFiddle 上没有 100% 正确显示，但这没问题，重要的部分都在那里)

我的问题是，如果您将浏览器缩放到小于 .container Width + .subnav Width 的宽度，则菜单链接“Über Uns”的最后一个下拉菜单会导致网站右侧出现空白

我花了好几个小时试图解决这个问题:/仅有的两个有效的解决方案(但都不好，我不能使用它们)正在使用 display: none 和 inline 但我会丢失过渡或使用 right: 0 而不是 left: 0 但是我的布局被毁了，因为这看起来一点也不好。

如果有人能帮我解决这个问题，我将不胜感激。

提前谢谢你

Answer 1

这确实解决了间距问题，但现在您需要调整子菜单以向左而不是向右飞出。但没什么大不了的。我稍微为您解决了这个问题，所以您已经完成了一半。

问题是浏览器仍然为“隐藏”元素留出空间。如果你想从空间计算中删除它，你需要使用 display:none

li.last-menu-item > ul.subnav { display: none; }
li.last-menu-item:hover > ul.subnav { display: block; width: auto; }

替代解决方案，因为我看到您不喜欢 display:none。无论如何，我认为这个解决方案更优雅一些:

ul.mainnav > li.last-menu-item ul.subnav {
    left: initial;
    right: 0px;
}