Мои навигационные подменю не меняют цвет при наведении курсора?

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

Ну, правила, которые могут реально повлиять на ваши цвета ссылок являются (в порядке специфичности)

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

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

3 в конце концов имеют одинаковую специфичность, так их порядок в вашем файле определит, что применяется, если они соответствуют элементу

Для подменю вы можете расширить правило nav ul li:hover a {color: #e80031;} до

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

---

Читать http://www.w3.org/TR/selectors/#specificity для получения дополнительной информации, а также играть с инструментом для сравнения их http://specificity.keegan.st/

Answer 2

Как Габи уже упоминалось, у вас есть некоторые ленаправленны войны здесь происходит, но вы также не ясны которые связаны с тем, что вы не получаете правильный цвет в своем вопросе. Таким образом, я делаю дикое предположение здесь, чтобы сказать, что это, возможно, придется делать с этим правилом:

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

Изменение, что к этому:

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

Смотрите этот codepen: http://codepen.io/keithwyland/pen/CzEcd