Question

我在这个网站上工作：http://cecraig.hhdev.hothousemarketing.com

下拉菜单在IE中无法正常工作（我在IE9和IE8中测试过）。只有当鼠标移到文本外面时，子菜单（ul）才会在鼠标悬停在父文本上时出现。我在其他网站上的下拉菜单中使用了相同的方法，它在IE中工作正常，不知道为什么它在这里不起作用。我知道IE的支持有限：将鼠标悬停在除“a”之外的其他元素上，但从我可以发现的仅仅是IE7。

这是我用于菜单的CSS，你可以调出源来查看菜单的HTML（由wp_nav_menu（）WordPress函数输出）：

#mainNav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#mainNav > ul {
margin-left: 234px;
height: 38px;
}
#mainNav > ul > li {
position: relative;
float: left;
}
#mainNav ul li a {
font-size: 11pt;
color: #fff;
text-decoration: none;
}
#mainNav > ul > li > a {
display: block;
height: 18px;
padding: 10px 12px;
}
#mainNav ul li a:hover {
color: #efefef;
}
#mainNav ul li.current-menu-item > a, #mainNav > ul > li.current-page-parent > a {
font-weight: bold;
}
#mainNav ul ul {
background-color: #e1a100;
display: none;
margin: 0;
position: absolute;
top: 38px;
left: 0;
width: 200px;
padding: 0 8px 8px 8px;
z-index: 99999;
}
#mainNav ul li:hover > ul {
display: block;
}
#mainNav ul ul li + li {
margin-top: 5px;
}

Answer 1

尝试添加：

.menu-item:hover{ display: block; }

使用复杂的悬停选择器，IE不能很好地完成任务。

Answer 2

要解决:hover问题，您应该在<a>元素上使用它。因为IE仅在:hover标记上支持<a>，而在li,div,span,dd,etc...上不支持

基于列表的下拉菜单在IE中不起作用

2 个答案: