html - CSS 子导航文本悬停颜色不起作用

Question

当您将鼠标悬停在它上面时，我无法让子导航菜单文本更改颜色。我要构建的是一个具有子导航的导航菜单。子导航链接的悬停状态会更改背景颜色和文本颜色。我无法让它工作，目前只有背景在翻转时发生变化，而不是文本。

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

这是 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 这样的东西使用 >选择器可能会有用。

或者，您可以尝试移动样式，以便按顺序给出正确的优先级。 (我没有检查以确保顺序是否是唯一的影响因素，所以如果只是移动样式不起作用，您可能不得不重新优化)