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

Question

我使用CSS和JavaScript创建了一个下拉菜单，我遇到了一个问题，使得子菜单在IE7上正确显示。当您将鼠标悬停在锚标记上时，背景会变为蓝色。问题是在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，所以无法正常测试： - /

Answer 2

尝试在这些锚标记上设置display:block。

Answer 3

您可以找到解决方案here (jsfiddle)。

我对#mainmenu li ul li进行了一些更改，并添加了#mainmenu li ul li:hover { background: #008de2;}。在我的IE7，IE9（没有IE8测试），Safari，Firefox，Opera和Chrome上看起来很好：）