下拉菜单在 Firefox/Chrome 中不起作用答案

【问题标题】：Dropdown Menu Not working in Firefox/Chrome下拉菜单在 Firefox/Chrome 中不起作用
【发布时间】：2011-08-05 13:05:38
【问题描述】：

所以我只能说我在 IE 上完成了所有工作，因为它总是 IE 会出现问题。但现在下拉菜单出现在其他浏览器（如 firefox 和 chrome）的内容后面。我所做的只是删除#head div 中的z-index。

网址：http://www.stingrayimages.ca/

使用 Z-index：它在 IE 中中断没有它，它在其他浏览器中会失败。

在不向头部 div 添加 z-index 的情况下修复下拉菜单？

#head {
    position:relative;
    height: 140px;
    width: 100%;
    background: #FFF;
    filter:alpha(opacity=93);
    padding-top:20px;
    /* CSS3 standard */
    opacity:0.93;
    -moz-box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
}

【问题讨论】：

一个示例链接真的很有帮助。否则，您总是可以使用条件样式表为 IE 添加 z-index。
@FreeAsInBeer @amustill 抱歉添加了网站
@amustill 我尝试放弃并为 z-index 使用条件样式表，但由于某种原因不起作用，但我知道样式表正在工作。

标签： html css internet-explorer drop-down-menu

【解决方案1】：

使用 z-index，只需将更高的 z-index 应用于位于顶部的下拉元素，或者您可以将 z-index 值应用于后面的所有内容，无论哪种方式都有效。

【讨论】：

【解决方案2】：

您可以做的一件事是将 z-index 放回原处并查找 IE 修复程序。

要考虑的另一件事是 html 的呈现顺序和树结构，因为这会影响位于顶部的内容。 http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/这篇文章比我解释得好。

如果您能够链接您正在开发的网站的示例，我们可能会更容易给出更具体的答案。

【讨论】：

抱歉，我添加了网站链接。

【解决方案3】：

您需要减少不透明度。当下拉菜单显示在图片上时，它会被洗掉，这使它看起来像是在图片后面。

此外，IE9 显示与 Chrome 和 FireFox 4 相同的问题。

【讨论】：

天哪，它有效！我想我不能在那里不透明？不透明度为 93%，这太过分了吗？
是的，93% 太多了，因为背景颜色与下拉菜单中的文本颜色非常相似。如果您想要不透明度，请尝试设置。执行类似将其设置为 20% 之类的操作，然后看看它的外观。将其更改为 40% 并再次查看它的外观。继续这样做，直到获得满意的不透明度值。
现在只有 IE6 出问题了。
IE6 是所有网页设计师的祸根。我怀疑位置：相对于引起问题。检查onderhond.com/blog/work/ie6-core-bug-fixing 进行修复。