Question

当您将子窗口菜单文本悬停在其上时，我无法更改颜色。我想要构建的是一个具有子空间的导航菜单。子窗口链接的悬停状态会更改背景颜色和文本颜色。我无法使其工作，目前只有翻转时的背景更改，而不是文本。

以下是导航示例的链接： http://confinedfoodie.com/test/contact.html subnav可以在“我们做什么”中的“视频帖子”下找到。

这是HTML：

<nav id="primary-nav"><!-- Navigation -->
          <ul>

    <li><a href="#nowhere">WHAT WE DO</a><!-- what we do -->
                <ul><!-- hidden links level 1 -->
                    <li><a href="radio-production.html">Radio Production</a></li>
                    <li><a href="voice-casting.html">Voice Casting</a></li>
                    <li><a href="#nowhere">Video Post</a><!-- video post -->
                        <ul style="width:170px;"><!-- hidden links level 2 -->
                            <li ><a href="mix-to-picture.html">Mix to Picture</a></li>
                            <li><a href="adr-film-tv.html">ADR for Film & TV</a></li>
                        </ul><!-- End hidden links level 2 -->
                    </li><!-- END video post -->
                    <li><a href="isdn-services.html">ISDN Services</a></li>
                    <li><a href="pharma.html">Pharmaceutical</a></li>
                    <li><a href="audio-books.html">Audio Books</a></li>               
                  </ul><!-- End hidden links level 1 -->
            </li><!-- END what we do -->
          </ul>             
        </nav><!-- /Navigation  -->

这是CSS：

nav ul ul li a {
padding: 5px 10px;
color: #c8c8c8;
}   
nav ul ul li a:hover {
    color: #fff; 
    background: #2b191c;
}

感谢任何帮助，谢谢你。

Answer 1

你的样式优先权有点问题。

你有这个样式选择器集，我假设涵盖所有其他链接：

nav ul li:hover a

由于您的第二个无序列表位于第一个无序列表的<li>范围内，因此它的元素也会继承此样式。

之后，你还得到了：

li:hover a

哪个更广泛，并且再次与您想要的风格重叠。

这两个声明优先，因为它们位于一个单独的样式表中，该样式表在样式表之后加载了更具体的样式。

这里有两个选择，最好是重新优化所有样式，以减少重叠，减少样式相互争斗的机会。这意味着创建更少，更具体的样式，可以更有效地覆盖您的网站。使用nav ul li:hover > a选择器的>之类的内容可能很有用。

或者，您可以尝试移动样式，以便按顺序给出正确的优先顺序。（我没有检查以确定订单是否是唯一的促成因素，所以如果只是移动样式不起作用，你可能不得不做一些重新优化）

Answer 2

您使用您拥有的确切代码制作的JSFiddle中的项目运行正常。我认为你的问题是你可能没有将css文件链接到你的HTML。这是一个例子：

http://jsfiddle.net/ym2cL/

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

http://www.w3schools.com/css/css_howto.asp

CSS subnav文本悬停颜色不起作用

2 个答案: