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

好的，我有一个无序列表，作为菜单链接的列表。在每个li中都有一个div，该div设置为绝对定位，底部为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正在进行，它应该找到menu div的高度，并将包含li的id设置为该高度，以便以后可以引用它。没关系……关键是，当div位于li中时，其计算高度为0。当它在外面时，它是正确的

有什么想法吗

这简直让我抓狂。我从来没有在这么简单的事情上遇到过这么多问题

提前感谢,， 克里夫

---

另外，我在目的地添加了一些HTML注释，以便您更好地理解我的意思

当您绝对定位一个元素时，它不会将其容器的大小扩展到容纳它所需的大小

示例

HTML

InOut

CSS

---

现场查看-

嗨，clifgriffin快速查看了你的HTML，很遗憾你没有给我们CSS，但是。。。有几件事我还不确定——标题上写着GeneratorWordPress 2.9.2，但html看起来确实像“熟悉的”WordPress。如果是WordPress生成的，则检查您正在使用的wp_列表_页面和wp_列表_类别标记。另外，我强烈建议升级到WP3.0，因为它有更多的功能（自定义帖子/页面类型等）以及“内置”菜单功能

我认为你可能使用了太多的CSS。你想做的大部分事情都可以用更少的钱完成

宾客服务

礼宾部/当地景点

东餐厅

水族馆休息室

健身俱乐部

Sandcampers计划

宝箱礼品店

然后，您可以给ul一个ID（记住ID必须是唯一的），这将有助于您使用任何Java，还可以通过背景图像类images/top\u menu\u slidedown\u gray\u bottom.png添加到ram类。当您再次使用ram类而不使用映像时。e、 g.

这样可以节省大量的“代码”和下载时间等

如果给ram类赋予属性“position:relative”；那么就可以给UL id赋予属性“position:absolute”；li的样式可以是

ul#ID li {line-height 30px; etc ...)
ul#ID li:hover {line-height 30px; etc ...)
ul#ID li:hover a {line-height 30px; etc ...)

等等

哦，忘了。。。还有，为什么不在头部添加此代码

<meta http-equiv="X-UA-Compatible" content="chrome=1">

这个就在标签后面

    <!-- DO NOT REMOVE  -->

<!-- THIS SECTION SETS THE LAYOUT FOR GOOGLE CHROME FRAME IF YOU NEED FURTHER INFO LOOK HERE http://code.google.com/chrome/chromeframe/ -->
<!-- Google Chrome Frame is a free plug-in that helps you enjoy modern HTML5 web apps within Internet Explorer. -->

<div id="prompt"><!-- if IE without GCF, prompt goes here --></div>

<script type="text/javascript">
    CFInstall.check({
     mode: "inline", // the default
     node: "prompt"
    });
</script> 
<!-- END THE LAYOUT FOR GOOGLE CHROME FRAME -->

CFInstall.check({
模式：“inline”，//默认值
节点：“提示”
});

这允许“检测”浏览器，并允许他们选择（如果未安装）使用Google Chrome Frame，您可以： 立即开始使用开放式web技术，比如HTML5画布标签，即使是Internet Explorer 6、7或8中尚不支持的技术。 利用JavaScript性能改进，使您的应用程序更快、响应更快。启用Google Chrome框架很简单。对于大多数网页，你所要做的就是像上面那样在你的网页上添加一个标签，并检测你的用户是否安装了谷歌Chrome框架。 如果没有安装Google Chrome Frame，您可以将用户引导到安装页面。

---

如果安装了Google Chrome Frame，它会检测到您添加的标签并自动工作。

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

---

相对定位的元素会影响容器大小（和内容流），但随后会移动到其他位置

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

无论如何，我做了以下CSS更改，并且在FF 3.6.4上该子菜单似乎呈现为OK：

对于

添加：

高度：230px；溢出：隐藏

对于

div.subMenu

add:

top:17px和删除：
底部：0

对于

gray\u middle

添加：

高度：160px；排名：0和删除：
填充顶部：20px

克里夫刚刚“完全”意识到你在这里想做什么-抱歉花了这么长时间才“细枝” 好的，你可以做这件事比你现在想做的要容易得多。它只需要一点JQuery和一些基本的CSS。无需设置绝对位置等

在CSS中，对class=“subMenu”使用{display:none；}正如您所知，这将“隐藏”它，我可能也会在JQuery函数中使用同样的方法来“双重确定”。然后在JQuery中为类top\u menu\u链接创建鼠标悬停效果（鼠标移到“better”而不是悬停上）（我认为您可以取出类“aco”和“white\u middle”，或者至少将它们组合到相关ul的css中）以显示.next（'ul）；您可以将其滑动等，然后在ul上执行鼠标移出功能。这样，ul在鼠标移出事件发生之前一直可见。我已经在WP主题上非常成功地做到了这一点，在div上的鼠标悬停事件上显示类别的“动态”列表，使其看起来像一个按钮。所以

    <!-- DO NOT REMOVE  -->

<!-- THIS SECTION SETS THE LAYOUT FOR GOOGLE CHROME FRAME IF YOU NEED FURTHER INFO LOOK HERE http://code.google.com/chrome/chromeframe/ -->
<!-- Google Chrome Frame is a free plug-in that helps you enjoy modern HTML5 web apps within Internet Explorer. -->

<div id="prompt"><!-- if IE without GCF, prompt goes here --></div>

<script type="text/javascript">
    CFInstall.check({
     mode: "inline", // the default
     node: "prompt"
    });
</script> 
<!-- END THE LAYOUT FOR GOOGLE CHROME FRAME -->

$(document).ready(function() {
$('.indexMenu').mouseover(function(){
$(this).children().show();
$(this).children().mouseover(function(){
$(this).children().show();
});
});

$('.indexMenu').mouseout(function(){
$('.sub_menu').hide();
});
});

<div class="indexMenu">
 Menu 1
    <div class="sub_menu">
        Item
        <br />
        Item
        <br />
        Item
    </div>
 </div>

  <div class="indexMenu">
  Menu 2
    <div class="sub_menu">
    Item
    <br />
    Item
    <br />
   Item
    <br />
    Item
    </div>
 </div>

  <div class="indexMenu">

    <div class="sub_menu">
    Menu 3
    <br />
    Item
    <br />
    Item 
    <br />
    Item
    <br />
    Item
    </div>
 </div>

  <div class="indexMenu">
  Menu 4
    <div class="sub_menu">
    Item
    </div>
 </div>

.indexMenu {
position: relative;
bottom: 3px;
width: 240px;
height: 32px;
float: left;
line-height: 30px;
border-top: 2px solid #FFFFFF;
text-align:center;
text-transform:uppercase;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
font-weight: 900;
color:#333333;

.sub_menu {
    display: none;
    position: absolute;
    bottom: 33px;
    width: 240px;
    background-color:#DBF3FD;
    opacity:0.8;
    filter: alpha(opacity=80);
}