0

我创建了一个站点，在其中构建了一个 3 级下拉菜单。到目前为止，我测试过的所有浏览器都运行良好，除了 IE8。在 IE8 中，当您将鼠标悬停在最高级别的按钮上时，会出现下拉菜单。当您将鼠标悬停在其下有子页面的任何辅助页面上时，菜单应该出现在父页面的右侧，并且在 Chrome、Firefox、Safari 和 IE9+ 中执行此操作。

我希望有人可以看看该网站，如果您有任何想法，请告诉我。

http://sightlines.quantumdynamix.net/

将鼠标悬停在“我们是谁”和“我们的团队”上应该有一个三级菜单，但它不会在 IE8 中显示。

这是显示三级菜单的 CSS：

#mainNavContainer .sub-menu li:hover > div > .sub-menu {
        display: block;
}

这里是菜单代码（因为你不需要整个菜单，所以被删减了）。很抱歉有大量的课程，但它是一个 Wordpress 菜单。

<div id="mainNavContainer">
    <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="menu">
            <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-first has_children menu-item-72">
                <a href="/who-we-are/">Who We Are</a>
                <div class="sub-menu-container">
                    <ul class="sub-menu">
                        <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73">
                            <a href="/who-we-are/our-story/">Our Story</a>
                        </li>
                        <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page has_children menu-item-74">
                            <a href="/who-we-are/our-team/">Our Team</a>
                            <div class="sub-menu-container">
                                <ul class="sub-menu">
                                    <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
                                        <a href="/who-we-are/our-team/executive-team/">Executive Team</a>
                                    </li>
                                    <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
                                        <a href="/who-we-are/our-team/leadership-team/">Leadership Team</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

这是正在发生的事情的屏幕截图。蓝色框是从 IE8 中的 Dev Tools 生成的，表示浏览器确实知道子菜单应该在哪里，但是当我将鼠标悬停在 Our Team 上时它不显示。

例子

4

2 回答 2

1

此 CSS 是导致错误的行：

filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444);

当我在 IE8 的开发工具中查看该站点时，该行内容如下：

filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444); BORDER-LEFT: #d5d5d5 1px solid

现在我已经对此进行了更改，我无法返回完整列表，但最初除了 BORDER-LEFT 之外的许多其他样式出现在过滤器行中。

我不确定过滤器中的什么导致了错误，但我们决定为 ie8 或更早的用户取消阴影，因此删除过滤器行修复了所有问题。

于 2013-06-20T20:15:17.360 回答
0

我不能使用Spoon.net——它是一项付费服务​​——但试试这个：

#mainNavContainer .sub-menu li:hover > div > .sub-menu:hover {
    display: block;
}

请尝试给出您的问题的图片。

于 2013-06-18T20:19:32.513 回答