css - 主菜单颜色变化

Question

我正在尝试定位我在 jfiddle 中加载的下拉菜单的标题元素：http: //jsfiddle.net/DZLtm/16/

我试图得到它，所以当你翻过 nav ul li 时，它会显示黑色而不是红色。这是我认为可以做到的线条。

nav ul li {float: right; width: 172px; height: 35px; background-color: red;}
nav ul li:hover > ul {display: block; text-align: left; background-color: black;}

这是HTML：

<nav>
<ul>
    <li><a href="#">BUTTON IMAGE</a>
        <ul>
            <li><a href="#">Accreditation Client Login</a></li>
            <li><a href="#">Training Client Login</a></li>
            <li><a href="#">Training Registration</a></li>
            <li><a href="#">Guardian Tracking</a></li>
        </ul>
    </li>
</ul>
</nav>

有人可以告诉我为什么 nav ul li:hover 不起作用以及 > ul 与它有什么关系。当我删除它时，它会破坏菜单。谢谢弗兰克！

Answer 1

只需添加nav ul li:hover { background-color:black; }

http://jsfiddle.net/weissman258/DZLtm/17/