0

我需要一些帮助。

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

我想支持IE8和IE7。

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

现在这是我的问题：下拉菜单适用于 IE9、IE10、Firefox、Chrome 和 Safari。但是，如果我将鼠标悬停在 IE8 中的“Verein”上，子菜单将不会向下滑动。它似乎是看不见的。

我知道它有很多代码，所以我做了一个 jsFiddle 示例（简化的代码），如 millimoose 建议的： 示例

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

感谢每一个有用的评论！

4

1 回答 1

0

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

我指的是这条线...

<li class="kontakt">

问题可能出在那儿吗？

于 2013-01-25T00:09:53.577 回答