Question

我创建了一个网站，我在其中构建了一个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生成的，表示浏览器确实知道子菜单应该在哪里，但是当我将鼠标悬停在我们的团队上时它不会显示。

Example

Answer 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或更老的用户修改投影，因此删除过滤器行修复了所有内容。

Answer 2

我无法使用Spoon.net - 这是付费服务 - 但请尝试以下方法：

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

请尽量说明你的问题。

CSS控制下拉菜单的IE8问题

2 个答案: