html - 嵌套子菜单导航栏突出显示问题

Question

我想创建一个嵌套菜单。我这里有一个 jsfiddle:

<div id=menu>
  <a class=optie href="#">Nieuws</a>
  <a class=optie href="#">Acties</a>
  <a class=optie href="#">Over ons</a>
  <a class=optie href="#">Webshop</a>
  <span class=optie>
    Webshop
    <span class=submenu>
      <a class=suboptie href="#">Producten</a>
      <a class=suboptie href="#">Winkelwagen</a>
      <a class=suboptie href="#">Afrekenen></a>
    </span>
  </span>
</div>

https://jsfiddle.net/9p202jt6/

基本上，当我将鼠标悬停在菜单项上时，我希望它突出显示。不管它是文本还是链接。

问题是当我将鼠标悬停在某个元素上时，我似乎无法正确更改背景渐变和文本颜色...

感谢任何帮助。

Answer 1

从 CSS 中删除以下代码:

.optie:hover a {
    color: rgb(56,56,56);
}  

因为它将应用于所有 <a> .optie 下的标签悬停时类。

Solution