【发布时间】：2013-01-08 21:21:21
【问题描述】：
我需要一些帮助。
我正在优化我为注册协会创建的主页。
我要支持 IE8 和 IE7。
我正在使用下拉导航。如果我将鼠标悬停在“Verein”上，下拉菜单应该会向下滑动，内容为“Vorstand, Satzung, ...”。
现在这是我的问题： 该下拉菜单适用于 IE9、IE10、Firefox、Chrome 和 Safari。但是，如果我将鼠标悬停在 IE8 中的“Verein”上，子菜单将不会向下滑动。它似乎是看不见的。
我知道它的很多代码，所以我制作了一个 jsFiddle 示例（简化代码），如 millimoose 建议的： Example
jsFiddle 在 IE7 中对我来说很好用，所以我相信它是一些与 css 相关的东西。
这里有一个现场示例：geschichtsverein-bademstal.de
这里是html结构：
<section id="navigation">
<!-- Navigation Oben -->
<div id="navigation_bg"></div>
<ul id="nav" class="nav">
<li class="kontakt"><a href="#">Top</a>
<ul class="sub">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
</ul>
</li>
</ul>
</section>
这是我的 CSS：
ul.nav {
position: relative;
float: right;
margin: -260px 10px 0 0;
font-size: 12px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
filter: alpha(opacity=80); /* IE 5-7 */
z-index: 200;
}
ul.nav li {
position: relative;
display: block;
float: left;
}
/* Text Navileiste */
ul.nav a {
display: block;
padding: 4px 10px 5px 10px;
color: #FFFFFF;
text-decoration: none;
vertical-align: middle;
font-weight: bold;
}
ul.nav li:hover {
background: #FFFFFF;
}
ul.nav li:hover a {
color: #000000;
}
/* Dropdown Navileiste */
ul.nav ul {
position: absolute;
display: none;
width: 140px;
padding: 0;
background-color: #FFFFFF;
z-index: 9999;
}
ul.nav ul li {
float: none;
}
/* Text Dropdown Navileiste */
ul.nav ul a {
text-align: left;
color: #000000;
font-weight: normal;
width: 140px;
}
/* Hovereffekt */
ul.nav ul li:hover > a {
background-color: #CCCCCC;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
filter: alpha(opacity=80); /* IE 5-7 */
}
/* Dropdown > Ebene 1 */
ul.nav ul ul{
position: absolute;
top: 0;
left: 100%;
border-left: 1px solid #4C4C4C;
}
/* Pfeilsymbol Dropdown */
ul.nav span {
display: block;
overflow: visible;
background-position: right center;
background-repeat: no-repeat;
}
ul.nav ul span {
background-image:url("../../img/icons/arrowsub.png");
}
这里是 JS：
/* Subnav Ebene 1 */
$('.nav').children('li').each(function(){
$(this).bind('mouseenter',function(){
$(this).find('.sub').slideDown(300);
}).bind('mouseleave',function(){
$(this).find('.sub').stop(true,true).hide();
});
});
/* Subnav Ebene 2*/
$('.nav li ul').children('li').each(function(){
$(this).bind('mouseenter',function(){
$(this).find('.sub_2').slideDown(300);
}).bind('mouseleave',function(){
$(this).find('.sub_2').stop(true,true).hide();
});
});
/* Subnav Ebene 3 */
$('.nav li ul ul').children('li').each(function(){
$(this).bind('mouseenter',function(){
$(this).find('.sub_3').slideDown(300);
}).bind('mouseleave',function(){
$(this).find('.sub_3').stop(true,true).hide();
});
});
编辑： 解决了我的问题
刚刚在我的 css 中删除了以下代码，现在它可以工作了。
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
filter: alpha(opacity=80); /* IE 5-7 */
感谢每一个有用的评论！
【问题讨论】：
-
那有什么问题呢？所有这些代码都与一个问题有关吗？ （如果没有，请提供简化的代码示例。）您采取了哪些步骤来诊断此问题？ （例如，浏览器的错误控制台中是否有任何内容？）
-
（另外：我的印象是人们通常不会去调试您的实时站点。）
-
提供的代码全部被下拉菜单使用。我不知道是什么导致了这个问题，因此我发布了整个代码。我在诊断工具中使用 IE 构建，我只能看到timeline.js 的问题。但它与我的问题无关。对于其他所有浏览器 Firefox、Chrome、Safari，它都可以正常工作。我尝试更改 css 以使子菜单未禁用（已删除显示：无），但子菜单不会显示。
-
“我不知道是什么导致了这个问题，因此我发布了整个代码。” - 那么您的问题是您无法诊断自己的问题。首先，尝试删除/简化代码，直到问题消失。当它发生时，显然你刚刚改变的东西在某种程度上是有罪的。发布所有代码是让任何人都看不到的好方法。
-
另外，“工作正常”和“不会出现”都是非常模糊的描述。应该什么时候出现？你能用一个简单的问题示例制作一个 jsFiddle 吗？ （即使用假数据，不要在每个嵌套级别使用多个菜单项，不要使用任何装饰性 CSS。）
标签： javascript css drop-down-menu internet-explorer-8