如何将此子菜单设为100％的高度？

Question

我有这个菜单here，我希望子菜单的高度为100％，如顶部菜单所示。
但子菜单链接应保持在它们所在的位置，只有黑色背景应该有100％的高度。

我在height:100%中使用#subMenusContainer进行了尝试，但我认为这只是其中所有链接的高度。

我是否必须使用JS读取页面的高度，然后计算边距/高度？
或者是否有更简单的css版本？

对于这个例子，我使用Mootools Menumatic，但是在jsFiddle中我没有使用JS，我只发布了代码。

当您将鼠标悬停在产品上时，导航应该看起来像this。

Greets Max

Answer 1

我已经为你的CSS做了一些调整，这是想要的效果吗？ - http://jsfiddle.net/ajthomascouk/JPtRb/

我基本上做了以下事情：

i）使容器具有透明background-color，width并隐藏overflow

#container{background-color:transparent; overflow:hidden; width:400px}

ii）给#nav黑色background-color和height 100％（将其改为你想要的）

#nav{background-color:#000; height:100%;}

iii）将top:60px更改为padding-top:60px #nav iv）使用borders来获得所需的效果：

#nav ul{border-top:1000px solid #000; border-bottom:1000px solid #000; position:relative; top:-965px; }

我认为这是你想要实现的目标......？