0

我正在这个网站上工作: 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;
}
4

2 回答 2

0

要解决问题,:hover您应该在<a>元素上使用它。因为 IE 支持:hoveronly on<a>标签,但不支持 onli,div,span,dd,etc...

于 2012-08-28T23:58:26.127 回答
0

尝试添加:

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

IE 在复杂的悬停选择器上表现不佳。

于 2012-08-28T23:55:33.240 回答