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的广泛一样宽。

然后，如果您在background-color而不是: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]-->

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

2 个答案: