css - 我的导航子菜单链接在悬停时没有改变颜色？

Question

这应该很容易，但我想不通!!!这是 CSS:

nav {color: #505050; font-size: 15px; line-height: 18px; word-spacing: 13px; float: right; margin-right: 16px;padding-top: 36px; width: 60%;}


nav ul ul{display: none;}

nav ul li:hover > ul {display: block;/* [disabled]color: #ccc; */}

nav ul {padding: 0 5px;border-radius: 10px;list-style: none;position: relative; display: inline-table;}

nav ul:after {content: ""; clear: both; display: block; }

nav ul li {float: left;}

nav ul li:hover a {color: #e80031;}

nav ul li a {display: block; padding: 4px 12px;color: #505050; text-decoration: none;}

nav a {text-decoration: none;}

nav a:visited { color: #505050; }

nav a:hover {color: #e80031;text-decoration: none;text-weight: bold;}

nav ul ul {background: #FFF;border-radius: 5px;border: thin solid #CCC;padding: 0px;position: absolute;top: 100%;right: 70%;z-index: 50;word-spacing: .2em;}

nav ul ul li {float: none;color:#505050;/* [disabled]border-top: 1px solid #6b727c; *//* [disabled]border-bottom: 1px solid #575f6a; */position: relative;}

nav ul ul:hover a {color: #ccc;}

nav ul ul li:hover a {background: #ccc;}

nav ul ul li a:link {color:#e80031;}

nav ul ul li a:visited {/* [disabled]color:#e80031; */}

nav ul li.active a{color: #e80031;font-weight: bold;}

Answer 1

正如 Gaby 已经提到的，您在这里发生了一些特异性 war ，但您也不清楚您遇到的哪些链接没有在您的问题中获得正确的颜色。所以，我在这里大胆猜测说这可能与这条规则有关:

nav ul ul:hover a {color: #ccc;}

改成这样:

nav ul li:hover ul li a {color: #ccc;}

请参阅此代码笔:http://codepen.io/keithwyland/pen/CzEcd