javascript - 为什么这个 DIV 渲染没有维度？

Question

http://clifgriffin.com/blockade2/

好的，我有一个用作菜单链接列表的无序列表。在每个 li 中都有一个设置为绝对定位的 div，bottom: 0。想法是将鼠标悬停在 li 中的链接上，jQuery 会设置高度动画以显示隐藏的菜单 div。

这是一个简单的概念，但我显然很困惑。

我遇到的问题是，当我将包含下拉菜单的 div 放入 li 时，它不会占用任何尺寸(根据 Firefox 和 Chrome 的计算样式信息)。如果我将它放在页面上的其他任何位置，它会完美呈现。你可以从链接中看到我的意思。顶部的灰色菜单应该在 li 中呈现，但实际上没有。

<div class="ram">
    <div class="gray_middle">
            <ul>
                    <li><a href="">Guest Services</a></li> 
                    <li><a href="">Concierge / Local Attractions</a></li>
                    <li><a href="">East Restaurant</a></li>
                    <li><a href="">Aquarium Lounge</a></li>
                    <li><a href="">Health Club</a></li>
                    <li><a href="">Sandcampers Program</a></li>
                    <li><a href="">Treasure Chest Gift Shop</a></li>
            </ul>
    </div>
    <div class="gray_bottom">
            <img src="images/top_menu_slidedown_gray_bottom.png" />
    </div>

有一些 javascript 应该找到菜单 div 的高度并将包含 li 的 id 设置为等于高度，以便以后可以引用它。没关系...关键是，当div在li中时，它的计算高度为0。当它在外面时，它是正确的。

有什么想法吗？

这让我非常疯狂。对于如此简单的事情，我从来没有遇到过这么多问题。

提前致谢， 悬崖

附言我在目的地添加了一些 HTML 注释，以便您能更好地理解我的意思。

Answer 1

绝对定位元素位于容器的“外部”，无法真正确定其大小。

相对定位的元素会影响容器大小(和内容流)，但随后它们会移动到其他地方。

此外，对于绝对定位和相对定位的元素，您应该始终给出明确的 X,Y 位置。这避免了一些渲染差异，跨浏览器。

无论如何，我做了以下 CSS 更改，该子菜单似乎在 FF 3.6.4 上呈现正常:

1. <li id="49">添加:height: 230px; overflow: hidden; .

2. div.subMenu添加:top: 17px;并删除:bottom:0; .

3. gray_middle添加:height:160px; top:0;并删除:padding-top:20px; .