我创建了一个站点,在其中构建了一个 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 上时它不显示。