0

我正在使用一个标准的 css 垂直导航菜单，它使用 ":hover" 来显示子菜单。菜单使用标准的“ul”和“li”元素完成。菜单位于页面的左侧，当您将鼠标悬停在菜单上时，它会弹出其右侧的子菜单。

我的问题是，弹出的子菜单，有没有办法让它全屏高度？

更新

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

所有周围的 html/css 都已删除，因此您只能看到菜单。

更新

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

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

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

4

2 回答 2

1

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

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

JSFiddle 演示在这里。在上面已经提到的上面添加了以下 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 选择器或偏移获取逻辑。

于 2012-08-29T16:29:36.457 回答
0

This gave the intended result.

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

However, also see Roddy's additional answer if you wish to align the child elements with the parent element.

于 2012-08-30T08:10:19.190 回答