Question

我需要一些帮助。

我正在优化我为注册协会制作的主页。

我想支持IE8和IE7。

我正在使用下拉导航。如果我将鼠标悬停在“Verein”上，则下拉菜单应向下滑动，内容为“Vorstand，Satzung，...”。

现在这是我的问题：下拉列表适用于IE9，IE10，Firefox，Chrome和Safari。但如果我在IE8中徘徊在“Verein”上，子菜单就不会滑落。它似乎是看不见的。

我知道很多代码，所以我做了一个像millimo一样的jsFiddle示例（简化代码）： Example

在IE7中，jsFiddle对我来说很好，所以我相信它的一些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 */

感谢所有有用的评论！

Answer 1

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

我指的是这一行...

<li class="kontakt">

问题可能在那里？

CSS Dropdown无法在IE8中运行

1 个答案: