Question

我使用的标准css垂直导航菜单使用＆＃34;：hover＆＃34;显示子菜单。菜单使用标准＆＃34; ul＆＃34;和＆＃34; li＆＃34;元素。菜单位于页面的左侧，当您将鼠标悬停在菜单上时，会弹出右侧的子菜单。

我的问题是，弹出的子菜单是否有办法使其达到全屏高度？

更新

这是一个非常简单的示例： http://jsfiddle.net/NuAWQ/1/

已删除所有周围的html / css，以便您可以看到所有菜单。

更新

我现在已经设法通过使用jQuery来做到这一点。 jQuery是：

$('ul > li > ul').css('height', $(window).height() + 'px');

http://jsfiddle.net/NuAWQ/2/

Answer 1

如果有人好奇的话，只是一些额外的信息。

除了上面的解决方案，它使用jQuery修复了整个大小调整问题：$('ul > li > ul').css('height', $(window).height() + 'px');（demo），可以通过扩展来进一步将子菜单项与悬停的父项对齐jQuery代码。

JSFiddle demo is here。以上jQuery代码被添加到上面已经提到过：

$('ul > li > ul > li:first-child').css('margin-top', function(index, value) {
    var offset = $(this).parent().parent().offset();

    if (offset != null && offset.top > 0) {
        return offset.top + "px";
    } else {
        return 0 + "px";
    }
});

这就是它的作用，它需要每个子菜单并向第一个margin-top添加一个<li>，它与悬停的父菜单项的垂直偏移量相同。在上面的演示中，这仅适用于第一个子菜单，但我很确定它可以应用于所有子菜单，并调整CSS选择器或偏移获取逻辑。

Answer 2

这给出了预期的结果。

$（'ul＆gt; li＆gt; ul'）。css（'height'，$（window）.height（）+'px'）;

但是，如果您希望将子元素与父元素对齐，也请参阅Roddy的其他答案。

无法使垂直飞出子菜单全屏显示

更新

更新

2 个答案: