html - IE7 下拉菜单让 li 填充剩余空间

Question

我使用 CSS 和 JavaScript 创建了一个下拉菜单，但我在使子菜单在 IE7 上正确显示时遇到了问题。当您将鼠标悬停在 anchor 标记上时，背景会变为蓝色。问题是在 IE7 中，背景只随着文本的长度而变化，而不是填充 ul 的宽度。因此，如果您有一个名称很长的元素，其余元素将无法正确显示，如下图所示。

你可以在 jsfiddle here 上看到问题.只需确保在 IE7 中打开它或在兼容模式下使用 IE9。

我已经尝试了很多方法，例如将宽度设置为 100% 并将显示设置为阻塞，但无法使其正常工作。有人解决过这个问题吗？

谢谢

Answer 1

好吧，让我们看看你有什么:

<li><a href="#">Content</a></li>

所以你可以看到问题是 hover正在应用于 <a>并且因为它不够宽，所以无法正常工作。

你为什么不hover <li>而不是呢？

改变自

#mainmenu li a:hover { background: #008de2; }

到

#mainmenu li:hover { background: #008de2; }

P.S. 我使用的是 IE9，所以我无法正确测试它:-/