Question

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

因为我不知道如何用可理解的英语解释我的问题，我将从我的代码开始，以便你可以看到我在说什么。（它在'{3}}上没有正确显示，但这没有问题，重要的部分就在那里）

我的问题是，如果您将浏览器缩放到比 .container Width + .subnav Width更宽的宽度，那么菜单链接'ÜberUns'的最后一个下拉列表会在网站右侧产生一个空白区域。

我正在尝试解决这个问题几个小时：/只有两个正在运行的解决方案（但两者都不好，而且我不能使用它们），正在使用display: none and inline，但我会丢失转换或使用right: 0代替left: 0，但我的布局已被破坏，因为这看起来并不好。

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

提前谢谢

Answer 1

编辑答案以符合OP的修订版：

ul.mainnav {
  + width: 100%;
}

//已更改为在jsfiddle

上工作

div#Logo {
    background: url(http://placehold.it/280x155) no-repeat left; 
}

小提琴：http://jsfiddle.net/8ktYy/14/

Answer 2

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

问题是浏览器仍然允许“隐藏”元素的空间。如果要将其从空间计算中删除，则需要使用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;
}

Answer 3

好吧，我认为解决这个问题的唯一方法就是当最后一个下拉列表向左而不是正确时。我不喜欢它但是没关系。我正在使用媒体查询，因此如果屏幕不够大，菜单只会离开。

首先在最后一个菜单项

中添加一个类

$('.mainnav > li').last().addClass('last-menu-item');

这是css

@media only screen and (max-width:1412px) {

li.last-menu-item:hover ul.subnav {
    right: 0 !important;
    left: auto !important;
}

li.last-menu-item > ul.subnav {
    right: 10px !important;
    left: auto !important;
}

绝对位置元素会导致站点旁边出现不需要的空白

3 个答案: