CSS Hover не принимает имя класса

Question

Я пытаюсь сделать гармоничное меню, чтобы работать.
Я нашел хороший здесь https://www.script-tutorials.com/css3-onclick-vertical-metal-menu, и теперь я пытаюсь внести коррективы.
Идея заключается в изменении цвета опций подменю, с CSS hover.
Но проблема: я не могу найти способ сделать различные цвета для работы с парении, в подменю ...
Посмотрите на эти Css линии:

#Top_Menu li a.SubMenu_1   {background:red   url("Down_Arrow.png") no-repeat;} 
#Top_Menu li a.SubMenu_2   {background:lime  url("Down_Arrow.png") no-repeat;} 
#Top_Menu li a.SubMenu_3   {background:yellow  url("Down_Arrow.png") no-repeat;} 
#Top_Menu li a.SubMenu_4   {background:lightgray url("Down_Arrow.png") no-repeat;} 

#Top_Menu a.SubMenu_1:focus   {background:mediumvioletred;} 
#Top_Menu a.SubMenu_2:focus   {background:limegreen;} 
#Top_Menu a.SubMenu_3:focus   {background:orange;} 
#Top_Menu a.SubMenu_4:focus   {background:gray;} 

#Top_Menu a.SubMenu_1:active  {background:mediumvioletred;} 
#Top_Menu a.SubMenu_2:active  {background:limegreen;} 
#Top_Menu a.SubMenu_3:active  {background:orange;} 
#Top_Menu a.SubMenu_4:active  {background:gray;} 

#Top_Menu li a.SubMenu_1:hover  {background-color:mediumvioletred;} 
#Top_Menu li a.SubMenu_2:hover  {background-color:limegreen;} 
#Top_Menu li a.SubMenu_3:hover  {background-color:orange;} 
#Top_Menu li a.SubMenu_4:hover  {background-color:gray;} 

#Top_Menu ul li a.SubMenu_1:hover {background-color:red;  color:black;} 
#Top_Menu ul li a.SubMenu_2:hover {background-color:lime; color:black;} 
#Top_Menu ul li a.SubMenu_3:hover {background-color:yellow; color:black;} 
#Top_Menu ul li a:hover    {background-color:magenta; color:black;} 

Весь код: https://jsfiddle.net/rbon/t3nefas3/1/
Подменю окрашено в красный цвет, известь, желтый и светлый. При действии пользователя (щелчок или наведение) они становятся средними, липкими, оранжевыми и серыми.
Все, кажется, в порядке ... НО последние 4 строки не выполняют работу, как ожидалось (ну, как я себе это представляю).
Я хотел бы, чтобы опции подменю превратились в оригинальные цвета подменю (красный, лайм, желтый, светлый), но они ВСЕ становятся пурпурными (я использовал пурпурный цвет, чтобы сделать его более четким).
В чем секрет последней строки ???

#Top_Menu ul li a:hover    {background-color:magenta; color:black;} 

Я хотел что-то подобное может работать вместо того, чтобы:

#Top_Menu ul li a.SubMenu_4:hover {background-color:lightgray;` color:black;} 

Что происходит ???
Первые 3 подменю имеют классы SubMenu_1 до 3, и они работают, за исключением последней последовательности команд (когда дело доходит до '#Top_Menu ul li a.CLASS_NAME: hover').
И это самое последний один ... Я не могу использовать имя класса SubMenu_4, потому что он просто не имеет цвета, который будет показан ...

Незначительный вопрос: внешний DIV (класс меню) не соответствует его обязательным шнурам (top = 0px). Зачем?

Answer 1

Ваш селектор неисправен; вы выбираете ссылку с классом, который не существует.

Try:

#Top_Menu li a.SubMenu_1 ~ ul li a:hover { 
    background-color: red; 
    color: black; 
} 

#Top_Menu li a.SubMenu_2 ~ ul li a:hover { 
    background-color: lime; 
    color: black; 
} 

#Top_Menu li a.SubMenu_3 ~ ul li a:hover { 
    background-color: yellow; 
    color: black; 
} 

#Top_Menu li a ~ ul li a:hover { 
    background-color: magenta; 
    color: black; 
} 

https://jsfiddle.net/t3nefas3/2/

Или добавить класс недостающую для каждого из звеньев подуровней.