html - CSS 菜单突出显示不停留在子悬停状态

Question

我正在尝试使用 CSS 创建分层菜单。如您所见，我的问题是，当我进入第三个 UL 时，第二个 UL 失去了它的样式(白色字体颜色)。我在我的 css 中缺少什么来使第二个 UL 保持白色字体和浅蓝色 BG，就像我对顶部 UL 所做的那样？

http://codepen.io/anon/pen/xhKrC

谢谢

<nav id="menu">
<ul>
    <li><a>Users</a></li>
    <li>
        <a>Applications</a>
        <ul>
            <li>
                <a>Application 1</a>
                <ul>
                    <li><a>Users</a></li>
                    <li><a>Roles</a></li>
                    <li><a>Groups</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</nav>

    nav {
    float: left;
    background: #142c56;
    color: #ffffff;
    height: 45px;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    position: relative;
    display: inline-block;
    list-style: none;
    white-space: nowrap;
    margin-left: 20px;
    box-sizing: content-box;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
    }
        nav ul li:hover {
            background: #425677;
            color: #ffffff;
        }

        nav ul li a {
            display: block;
            padding: 14px 33px;
            margin-top: 1px;
            cursor: pointer;
            text-decoration: none;
        }       

    nav ul ul {
        background: #ffffff;
        position: absolute; 
        top: 100%;
        margin-left: 0px;
        display: none;
    }
        nav ul ul li {
            float: none;
            position: relative;
        }
            nav ul ul li a {
                padding: 15px 40px;
                color: #425677;
                margin-top: 0px;
            }
                nav ul ul li a:hover {
                background: #425677;
                color: #ffffff;
                }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

Answer 1

您只需将该笔的 CSS 中的第 75 行更改为 nav ul li:hover > a - 链接会覆盖文本的颜色，这就是您需要过度指定的原因这条规则。