如何在 IE7 中设置下拉菜单项的背景颜色宽度？

Question

我有如下导航栏：http://jsfiddle.net/jajq3/embedded/result/

为了后代，这是结构：

<div id="navBar">
    <ul style="float: left; padding-left: 5px;">
        <li>
            <a href="#">A</a>
        </li>
        <li>
            <a href="#">B</a>
        </li>
        <li>
            <a href="#">C</a>
            <ul>
                <li><a href="#">This is a thing.</a></li>
                <li><a href="#">Cool man</a></li>
                <li><a href="#">Linus</a></li>
            </ul>
        </li>
        <li>
            <a href="#">D</a>
            <ul>
                <li><a href="#">Gerg.</a></li>
                <li><a href="#">Weeeeeeeeeeeeeeeeeeeeee</a></li>
                <li><a href="#">asdf idiot</a></li>
                <li><a href="#">blah</a></li>
            </ul>
        </li>
    </ul>
</div>

如您所见，当您将鼠标悬停在下拉菜单链接上时，链接后面的背景颜色会发生变化。但是在IE7中，背景并没有一直延伸到下拉菜单的边缘；它只会到达链接文本的边缘。在现代浏览器中，没有观察到这一点。那么我怎样才能让这个在 IE7 中工作呢？

在回答之前，请注意我不想明确设置下拉菜单的宽度。目前，下拉菜单链接决定了下拉菜单的宽度，这就是我希望它保留的方式。 （例如，D 的下拉菜单应该总是比 C 的宽，因为它有很长的“Weeeeeeeeee”链接）

Answer 1

您应该摆脱在#navBar > ul > li > ul > li 上设置的样式，而让列表项成为列表项。然后它们会自动与包含ul 一样宽。

然后，如果您将:hover 设置为li 而不是a，则background-color 会填满菜单的整个宽度。

这是一个 jsFiddle embedded result link，它可以在 IE7 中运行。

摆脱这一点CSS：

#navBar > ul > li > ul > li { width: 100%; clear: left; display: block; }

并将 CSS 底部的类拆分为两部分：

#navBar > ul > li:hover > ul > li:hover
{
    background-color: #999;
}
#navBar > ul > li:hover > ul > li:hover > a
{
    color: white;
}

Answer 2

您需要为您的项目添加自定义 IE7 样式表并添加特殊填充。

<!-- [if IE 7]>
<style rel="text/css">
  myMenu li {

     padding-left: 10px;
     padding-right: 10px;
  }
</style>
<![endif]-->