IE7下拉菜单使li填充剩余空间答案

【问题标题】：IE7 Dropdown Menu Make li Fill Remaining SpaceIE7下拉菜单使li填充剩余空间
【发布时间】：2011-08-29 14:46:17
【问题描述】：

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

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

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

谢谢

【问题讨论】：

您是否尝试过在悬停时指定width: 89%？ #mainmenu li a:hover { width: 89%; background: #008de2;}，试试看：）。我自己没有 IE-7 来测试它。刚刚在 Firefox 上测试。
不，那也没用。你的逻辑是什么？
坦率地说，使用 Firebug 并随机给出 % 来测试它的表现。一开始我给了 100%，突出显示部分在悬停时溢出。对于 89% 来说，它是完美的。

标签： html css menu drop-down-menu

【解决方案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，所以无法正常测试：-/

【讨论】：

使用开发者工具，你能明白为什么在你改变CSS悬停孔<li>之后，悬停只在<a>有效吗？
我很抱歉。这确实有效。我只需要更改子菜单的 CSS（#mainmenu li ul li:hover 不是 @mainmenu li:hover）。谢谢。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可能会找到您的解决方案here (jsfiddle)。

我对@987654322@ 做了一些更改，并添加了#mainmenu li ul li:hover { background: #008de2;}。在我的 IE7、IE9（没有要测试的 IE8）、Safari、Firefox、Opera 和 Chrome 上看起来不错：)

【讨论】：