Question

在firefox中（这在IE6中根本不起作用）我有这个代码

<div class="menu">
    <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="software.html">Software</a>
        <ul>
        <li>Blah</li>
        <li>Blah3</li>
        <li>Blah</li>
        </ul>
    </li>
    <li><a href="samples.html">Code Samples</a></li>
    <li><a href="resume.html">Resume</a></li>
    </ul>
    </div>

使用此css

ul.nav li:hover,
.nav   a:hover
{
    background-color:#606060;
    color: white;
}

我将菜单文本（“软件”）变为白色，而背景变为灰色。然而，当我将鼠标移动到菜单项时，背景仍然是灰色的，但下一个不再是白色！为什么？我该如何解决这个问题？

Answer 1

这应该有效：

ul.nav li:hover,
ul.nav li:hover a,
{
    background-color:#606060;
    color: white;
}

我不确定为什么，但显然你必须直接选择 a 元素来改变它的颜色，否则它将被忽略。

Answer 2

可能是其他规则干扰你的CSS，不能说没有看到一切。我建议使用Firebug来查看计算出的CSS和CSS规则，看看它是否正在按预期进行。

Answer 3

你必须重新编写你的CSS，但是如果你正在做一个基本的菜单子菜单，你可以通过将子菜单包装在'a'标签中来使用IE和FF。

<div class="menu">
    <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="software.html">Software
       <ul>
            <li>Blah</li>
            <li>Blah3</li>
            <li>Blah</li>

       </ul>
      </a>
    </li>
    <li><a href="samples.html">Code Samples</a></li>
    <li><a href="resume.html">Resume</a></li>
    </ul>
</div>

一些CSS不应该要求JS在IE6中工作。没有测试但应该工作。请注意，您还需要为subnav添加样式和定位，但这仍然显示基础。

.menu ul li a {
  color: blue;
}
.menu ul li a ul {
  display: none;
}
.menu ul li a:hover {
  color: white;
}
.menu ul li a:hover ul {
  display: block;
}
.menu ul li a:hover ul li {

}
.menu ul li a:hover ul li a {
  color: black;
}
.menu ul li a:hover ul li a:hover {
  color: red;
}

然后，在第一个菜单添加后，您想要的每个子菜单

.menu ul li a:hover ul li a ul {
  display: none;
}
.menu ul li a:hover ul li a:hover ul {
  display: block;
}

列表和弹出菜单中的css颜色效果

3 个答案: