Question

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

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

我遇到的问题是，当我将其放入li时，包含下拉菜单的div不会占用任何维度（根据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.当它在外面时，它是正确的。

有什么想法吗？

这让我非常沮丧。我从来没有遇到过如此简单的问题。

提前致谢，克里夫

P.S。我在目的地添加了一些HTML评论，以便您更好地了解我的意思。

Answer 1

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

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

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

无论如何，我进行了以下CSS更改，并且子菜单似乎在FF 3.6.4上呈现正常：

对于<li id="49">添加：height: 230px; overflow: hidden;。
对于div.subMenu添加：top: 17px;并删除：bottom:0;。
对于gray_middle添加：height:160px; top:0;并删除：padding-top:20px;。

Answer 2

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

示例

HTML

<div id="outer"><div id="inner">In</div>Out</div>

CSS

#outer { background-color: red; } #inner { width: 100px; position: absolute; top: 100px; background-color: blue; }

在此处观看 - http://www.jsfiddle.net/r7MgY/86/

Answer 3

嗨clifgriffin快速看看你的HTML，惭愧你没有给我们CSS，但是...有一些我不确定的东西 - 标题说生成器WordPress 2.9.2但是HTML确实看起来像“熟悉的”WordPress。如果是生成的WordPress，请检查wp_list_pages＆amp;您正在使用的wp_list_categories标记。此外，我还建议升级到WP3.0，因为它具有更多功能（客户帖子/页面类型等）以及菜单功能中的“内置”功能。

我认为你可能使用了太多的CSS。你想要实现的大部分内容可以用更少的东西完成。

访客服务

礼宾/本地景点

东餐厅

水族馆休息室

健康俱乐部

Sandcampers计划

百宝箱礼品店

然后你可以给ul一个ID（记住ID需要是唯一的），这将有助于你想要使用的任何Java也添加到你的ram类与背景图像类images / top_menu_slidedown_gray_bottom.png。在没有图像的情况下再次使用ram类。例如<div class="ram backgroundimageclass">然后您将保存大量“代码”和下载时间等。

如果你给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 -->

这样可以“检测”浏览器并为他们提供使用Google Chrome Frame的选项（如果没有安装），您可以：立即开始使用开放式Web技术（如HTML5 canvas标签），甚至是Internet Explorer 6,7或8中尚不支持的技术。利用JavaScript性能改进，使您的应用程序更快，响应更快。启用Google Chrome Frame非常简单。对于大多数网页，您只需向上面的网页添加一个标记，然后检测您的用户是否安装了Google Chrome浏览器内嵌框架。如果未安装Google Chrome Frame，您可以将用户定向到安装页面。如果安装了Google Chrome浏览器内嵌框架，它会检测您添加的标记并自动生效。

Answer 4

Cliff只是“完全”意识到你在这里想要做什么 - 抱歉花了这么长时间来“树枝” 好的，你可以比你现在尝试做的更容易。它需要的只是一个小JQuery和一些基本的CSS。不需要绝对等等。

在CSS中使用{display：none;对于class =“subMenu”你知道这会“隐藏”它，我也可能想在你的JQuery函数中做同样的事情来“双重确定”。然后在JQuery中为类top_menu_links创建鼠标悬停效果（鼠标悬于“更好”而不是悬停）（我想你可以取出“aco”和“white_middle”类或者至少将它们组合在相关ul的css中）显示.next（'ul）;你可以滑动它等。然后在ul上的mouseout功能。这样，在鼠标停止事件之前，ul保持可见。我在WP主题上做得非常成功，在div上显示一个鼠标悬停事件的“动态”类别列表，看起来像一个按钮。抱歉，没有手头的代码，但稍后会看到并“传递”

此外，您可以将ul背景图像设置为approp。 <img src="images/top_menu_slidedown_white_bottom.png" />（或灰色）只需将其设置为背景位置：bottom repeat：none;和底部填充图像的高度。不需要alt标签等。

Answer 5

很抱歉“出了一点”，无论如何这里是我用来“重新创建”你的底层菜单的代码。它不会像你建议在“菜单项”或“子菜单”的鼠标输出后关闭。要让它在顶层菜单上工作，只需从下到上更改位置：

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

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

这是“html”

<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>

显然你可以在子菜单中“使用”任何东西，如ul，ol等......

和“简单的CSS

.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);
}

好的我已经在子菜单中添加了一个过滤器以具有一定的透明度

Answer 6

绅士感谢您的所有回复！对不起，我花了这么长时间才回到这篇文章。

这整个问题揭示了一些我还不了解HTML元素呈现方式的事情。

我能够通过将主菜单块切换为div元素而不是li元素来解决此问题。

这对我来说没有任何意义，因为我可以通过查看计算出的样式来呈现两者大致相同的方式。但是，无论出于何种原因，一旦容器是div，包含的div就会以适当的尺寸呈现，这样我的其余代码就能正常工作。我甚至不需要更改附加的CSS！

由于这个项目的主要目标是完成并让客户满意，所以我没有尝试超越这个发现。

我欢迎有关为何会这样做的理论。

再次感谢。克里夫

为什么这个DIV渲染没有尺寸？

6 个答案: