javascript - 我怎样才能使这个子菜单的高度达到 100%？

Question

我有这个菜单 here我希望子菜单像顶部菜单一样是 100% 高度。
但是子菜单链接应该留在它们所在的位置，只有黑色背景应该有 100% 的高度。

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

难道一定要用JS读取页面高度，然后计算边距/高度吗？
或者有没有更简单的 css 版本？

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

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

问候麦克斯

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 和 100% 的 height(将其更改为您想要的)

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

iii) 在 #nav 上将 top:60px 更改为 padding-top:60pxiv) 使用 borders 获得想要的效果:

#nav ul{border-top:1000px solid #000; border-bottom:1000px solid #000;职位:相对；顶部:-965px； }

我认为这就是您想要实现的...？