CSS下拉菜单在IE8中不起作用

Question

我需要些帮助。

我正在优化我为一个注册协会的主页。

如果我将鼠标悬停在"Verein“上，一个下拉菜单应该会滑下，内容是"Vorstand，Satzung，...”。

现在我的问题来了:下拉菜单在IE9、IE10、火狐、Chrome和Safari上都能用。但是如果我在IE8中将鼠标悬停在"Verein“上，子菜单就不会滑下来。

我知道它有很多代码，所以我做了一个jsFiddle示例(减少了代码)，就像Example建议的那样：

jsFiddle在IE7中运行得很好，所以我相信它是一些与css相关的东西。

<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");
}

    /* 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 */

Answer 1

您已经为弹出窗口分配了一个KONTAKT类，但我在上面的代码中看不到它。

我指的是这一行...

<li class="kontakt">

有没有可能问题出在那里？