如何在Foundation 4顶栏中修复太长的css下拉？

我正在尝试使用Foundation 4框架修复网页.该页面的css下拉菜单高于屏幕高度.屏幕上不适合的项目无法访问,请参阅菜单Baggers 巴黎在这个简化的演示页面上:

http://janosgyerik.github.io/BrownBagLunch/dropdown-issue.html

将下拉菜单滚动会很棒,例如,如此页面所示:

http://css-tricks.com/examples/LongDropdowns/

并在此页面上解释:

http://css-tricks.com/long-dropdowns-solution/

我从解释中复制了代码,但我不是CSS wiz,而且我一直在努力将代码应用到上面的演示页面中.有人可以帮帮我吗？我也对其他类型的解决方案持开放态度,不一定是这个特殊的技巧.

UPDATE

受@topless的回答启发,我解决了这个问题:

function fixDropdown() {
    var maxheight = $(window).height() - $('nav.top-bar').height();
    var dropdown = $('ul.dropdown ul.dropdown');
    dropdown.css({ 'max-height': maxheight, 'overflow-y': 'auto' });
}
$(window).on('load', fixDropdown);
$(window).on('resize', fixDropdown);

topless.. 8

当高度大于浏览器窗口的大小时,我没有看到任何其他解决方案而不是滚动.用css我会这样做.如果您不希望选项到达页面底部,则可以定义max-height属性.

ul {
    max-height: 300px;
    overflow-y: scroll;
}

为了实现长期下降所发布的效果,您可以按照 css-tricks中同一个人的说明进行操作.