CSS懸停不接受班級名稱

Question

我正在努力使菜單工作的手風琴。
我在這裏找到了一個不錯的地方https://www.script-tutorials.com/css3-onclick-vertical-metal-menu，現在我正在嘗試做出調整。
意念是改變子菜單選項的顏色，用CSS懸停。
但問題是：我不能找到一種方法，使不同的顏色與懸停工作，子菜單裏面...
看看這些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（類菜單）不符合其強制配對（頂部= 0px）。爲什麼？

Answer 1

您的選擇器不正確;你正在選擇一個不存在的類的鏈接。

嘗試：

#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/

或添加類失蹤每個子級別的鏈接。