0

我有以下导航栏：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”链接）

4

2 回答 2

1

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

然后，如果您将 on 设置为background-coloron: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;
}
于 2013-05-22T08:38:36.603 回答
-1

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

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

     padding-left: 10px;
     padding-right: 10px;
  }
</style>
<![endif]-->
于 2013-05-15T14:23:38.630 回答