IE 7 CSS 下拉菜单问题答案

【问题标题】：IE 7 CSS drop menu troublesIE 7 CSS 下拉菜单问题
【发布时间】：2011-08-19 13:22:46
【问题描述】：

我有几个下拉菜单在 IE7 中给我带来问题。我浪费了整个上午试图修复它。客户端正在使用 IE7 监控站点，因此这是首要任务。

我有一个 live demo 和一个 jsfiddle 演示设置。 Here is the actual site我今天也在工作，仅供参考，但演示中的问题是孤立的。我留下了一些重置 css 等以防万一。

有2个问题：

最重要的：IE7 的顶部菜单和标题内容存在 z-index 问题。标题位于下拉菜单上方。
不太重要：顶部菜单的第一个链接和下拉菜单之间有一个小间隙，当鼠标从顶部链接移到下拉菜单时，有时会导致下拉菜单消失。至少在 Firefox 4 和 IE 7 中会出现此问题。此问题不会出现在底部菜单中。

我删除了 javascript，尝试删除所有 clearfix css，减少 css 和 html，从 html5 切换到 xhtml1 strict，使用 position 和 z-index 属性，并阅读了这里和其他地方的几篇关于 z-index 错误的文章IE，但我仍然无法让这个让步。

我不关心 IE6 支持，或者如果我必须使用 javascript，我只需要让它在 IE7 中为客户端工作。非常感谢任何帮助。

【问题讨论】：

如果有帮助，我已经多次解决了这些类型的问题：see，特别是这些答案包含解释（或指向它们的链接）：1、2、@987654327 @.
是的，这确实有助于@thirtydot，我最终为 IE7 中的一些其他元素提供了一个糟糕的临时 javascript 修复程序，我将参考这些答案。我读了几篇关于 z-index 的文章，但无法让这篇文章发挥作用，我通常从来没有遇到过问题，但我承认我通常只是在不知道自己在做什么的情况下随意乱扔 z-index 值。谢谢。
对于帮助我首先理解这个问题的详尽而准确的解释：stackoverflow.com/questions/672228/ie-6-ie-7-z-index-problem/…

【解决方案1】：

#header 和 #nav 添加：

position:relative;

和

z-index:10 //for #nav
z-index:0  //for #header

【讨论】：

就是这样！我真的花了一上午的时间，你在 5 分钟内解决了它！当我完成这个项目后，我会更多地阅读 z-index，这对我来说是一个谜太久了。
对于第二个问题，我建议使用 css 将“.nav > li > ul”元素移动 2px。在 UL 中填充 top 也可能会导致一些问题。
我不明白的主要事情是在哪些元素上设置 z-index，我在第二个导航和内容正文中遇到了类似的问题，但现在我可以自己弄清楚（希望）。第二个问题可能会退居二线，javascript 正在现场处理它。不过我会试一试。