CSS＆amp; Blogger中的HTML下拉菜单---在IE中悬停时不显示;但在其他浏览器中完美

Question

我正在使用html＆amp; amp;添加一个下拉菜单栏到我的博客CSS。

代码来自My Blogger Lab，有调整颜色等。

我的测试网站是：http://practicedailygratitude.blogspot.com/

我对Chrome浏览器的外观非常满意Firefox（下拉菜单仅适用于About，Images和Home DIY;其余只是链接）。

我在IE中遇到以下问题（我试过7,8和64位）：

1. 在资源管理器中，下拉菜单显示几乎是透明的背景（我可以在后面看到帖子的文字）
2. 在资源管理器中，下拉的速度非常快，我无法悬停或选择。
3. 在safari中，链接未处于活动状态，并且悬停时会显示下拉列表。

我一直在寻找两个星期并尝试不同的调整和来自其他帖子的建议，但我不知道如何在IE中使用它。

我不使用IE浏览器，但有30％以上的博客粉丝，所以我需要进行调整，此时我完全没有想法（而且我已经达到了我的能力）。

我已经能够调整代码以使其完全按照我想要的方式（在标题中悬停在标题横幅上的下拉菜单）在Chrome＆amp; Firefox浏览器。

注意：此代码要求将html小工具放在博客文章部分的顶部，而不是标题，这就是为什么我更改了一些边距等以使下拉移动并“看起来正确”背后的标题图片。

这就是我所看到的：



Josh Peterson的Blogger主题是SIMPLE。这是Blogger中为数不多的选择之一----我没有修改它;我只修改了我在帖子部分上面添加的1个html小部件，然后有一个高级的CSS选项卡用于模板----这是我去高级的地方然后“添加CSS”并从我的Blogger实验室添加了CSS （只更新颜色并移动以便覆盖标题）----然后CSS似乎将自己添加到SIMPLE模板中。

html for widget：http://practicedailygratitude.blogspot.com/2012/09/my-blogger-lab-html-code-for-widget.html

CSS：http://practicedailygratitude.blogspot.com/2012/09/my-blogger-labs-css-i-modified-for.html

Blogger中的简单模板http://practicedailygratitude.blogspot.com/2012/10/simple-template-from-blogger.html

Answer 1

我看了你的代码，首先需要清理它。通过清理，我的意思是标记中的语法错误：http://validator.w3.org/check?uri=http%3A%2F%2Fpracticedailygratitude.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

这里有很多错误可能导致您遇到的问题。

如果您在清理后仍然看到问题，则应该将其作为IE7上的常规z-index问题处理。如果您将position: relative;和z-index: 500;放在包含该菜单的所有父元素上，则可以解决此问题。因此，请div转div并添加position和z-index规则。由于您的菜单的z-index值为500，因此其父级必须也具有该规则的定义值，该值必须等于或大于子元素 - 在本例中为菜单。这将解决内容后面的菜单问题（我已经在网站的当前状态下对其进行了测试）。

在旁注中，您在页面上声明了以下标记：<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>。这样做是强制Internet Explorer 8+使用IE7兼容模式呈现页面。我想你想删除这个标签。

如果这有助于你，请告诉我。