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

我想创建一个嵌套菜单。我在这里有一个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/

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

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

任何帮助表示赞赏。

最佳答案

从CSS中删除以下代码：

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

因为它将悬停在<a>类下的所有.optie标记上。

Solution