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

你的选择器不对；您正在选择一个不存在的类的链接。

试试：

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

或者将缺少的类添加到每个子级链接中。