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

Question

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

下拉菜单在 IE 中无法正常工作(我已经在 IE9 和 IE8 中测试过)。子菜单 (ul) 仅在将鼠标悬停在父级文本上时出现，一旦鼠标移出文本，它就会消失。我在其他网站上对下拉菜单使用了相同的方法，它在 IE 中工作正常，不知道为什么它在这里不起作用。我知道 IE 对 :hover 在除“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 不能很好地处理复杂的悬停选择器。