只有CSS的下拉菜单,li:hover和child-ul之间的间隙在IE中不起作用



我有一个基本的纯css下拉菜单,在Chrome和Firefox中效果很好,但在IE9中效果不太好。问题是,我正在实现的设计在父项的水平行和子导航项的相应子列表之间有一个微小的间隙。

我在父li的悬停位置显示子菜单。子菜单在所有浏览器中都显示良好。

当我试图将光标移动到父li和子菜单无序列表之间的小间隙(大约10px)时,就会出现问题。光标实际上并没有离开父li,因为间隙是通过对li应用更大的高度(对其子锚点元素应用更小的高度)来形成的,所以我不明白IE为什么表现得像li:一旦我的光标不再位于子链接上,悬停就不再发生。

如果我把光标快速移动过这个间隙,我实际上可以把它移到子菜单上,并很好地使用它,但由于可用性的原因,这是不好的。

我肯定错过了一些非常明显的东西!!

要查看问题,请访问http://beta.pancreaticcanceraction.org/

在该URL的末尾添加"preview2012"以访问该网站(我不想把整个链接放下来,以防它被爬网)。

提前感谢您的帮助!

如果您将LI(LI.Pparent)的背景设置为红色,您将在IE中看到,无论您给它多大的额外高度,它都只与包含的NAV元素一样高。

我一直在摆弄IE9开发工具,试图让它位于NAV容器的顶部和"外部",但还没有成功。我想我会发帖帮助你走上正确的方向。

编辑:如果在UL.menu元素上加上一个"position:relative",它就解决了这个问题。

希望能有所帮助!

最新更新