为什么 CSS 下拉菜单会使内容跳下？什么可以解决这个问题？答案

【问题标题】：why CSS dropdown menu makes content jump down? What fixes this?为什么 CSS 下拉菜单会使内容跳下？什么可以解决这个问题？
【发布时间】：2010-01-24 09:07:27
【问题描述】：

我正在开发一个纯 CSS 下拉菜单。（现在IE6对我来说并不重要。）

我将所有内容都放在一个“包装”div 中以进行居中。

页面在“#wrapper”中有 4 个 div，第一个是“#topbar”，第二个是“#nav”，第三个是“#content”框，第四个是“#footer”。

“#content”和“#footer” div 具有绝对定位，以防止它们在子菜单显示时跳下。这适用于 IE8、Chrome 和 FF，但 IE8 的兼容模式显示 IE7 会将“#content”和“#footer”div 呈现在居中列的左侧。此外，绝对定位用于将页脚保持在页面底部。删除它修复了 ie7 错误，但是当子菜单暴露时，它会导致所有内容都向下移动。

有没有办法修复 IE7 在没有绝对定位的情况下在底部 div 上呈现左边距？还是和它一起？

我更喜欢纯 CSS。

编辑：

信不信由你，我使用的是一堆 span 元素，而不是 ul 或 div。我应该使用 ul/li 结构吗？我发现它是额外的代码。

【问题讨论】：

标签： drop-down-menu css

【解决方案1】：

您是否想过将 div 放置在 relative 并将子菜单放置在 absolute 相对于它的容器？

ul.menu li             { position:relative; overflow:auto; }    
ul.menu li ul.sub_menu { position:absolute; z-index:10; top:somePixelValueThatClearsTopListItem; }

【讨论】：

你真的应该考虑一下。它在语义上比使用 span 更“正确”（虽然是主观的）。
@o.k.w. - 你是对的，事实是，它可能也减少了带宽消耗。我看看能不能试一试。

【解决方案2】：

如果IE6不重要，你有没有考虑过忽略IE7？

无论如何，由于您没有发布代码，因此快速修复将是使用 IE conditional comments 并将其放在其余 CSS 定义/链接的下方。

<!--[if IE 7]>
<style type="text/css">
  .className {position: static;/*or relative*/}
</style>
<![endif]-->

【讨论】：

ie7 还是太常见了。我一直是一个“标准设计师”，ie6的印象远不如ie7。