Javascript 尝试在Wordpress中的下拉菜单选项上添加鼠标突出显示

我想在我的下拉菜单选择中添加一个鼠标突出显示，因为目前我的菜单上只有一个简单的下拉菜单。我有最新的wordpress版本，我正在研究oneengine主题。我试着从谷歌上找到的一些建议中添加这一点，但它根本不起作用，鼠标放在上面根本没有反应：

#navigation li:hover a {
  background-color:#012A5E;
  color:#F1F1F1;
}

下面是my style.css中与菜单本身相关的代码：

#main-menu-top ul.sub-menu li a:hover, 
#main-menu-top ul.sub-menu li a:active {
border-left-color:#ccc; border-bottom-color: transparent;
 }
#main-menu-top .sub-menu {
 float: left; position: 
 absolute; display:
 none; padding: 0; 
 text-align: center; 
 border: 1px solid #BDC3C7; 
 border-top: none; 
 background: black; 
 z-index: 9999;
}
#main-menu-top li:hover ul.sub-menu {
display: block;
 }
 #main-menu-top .sub-menu li {
display: block; min-width: 100px;
}
 #main-menu-top .sub-menu li a { padding: 10px 15px;
 }
}

---

这项更改是否只需要更改style.css，还是我还需要制作一个j.script代码？非常感谢您的帮助。

您的主题是否有自定义css页面？如果是，则在此处添加此代码。

nav ul li:悬停{背景：红色；}

---

如果不可用，则转到Dashboard->Appearance->Editor并选择“Stylesheet（style.css）”文件，然后将代码添加到文件的末尾。但这有一个问题。在将来更新主题时，有可能丢失所有编辑。因此，创建子主题以永久保留所有更改是安全的。请参阅以了解有关子主题的更多信息。

您正在使用主题吗？如果是，尝试使用

nav ul li:hover{background:red；}

@ArshadMuhammed谢谢，但是我应该在哪里插入这个？你的主题有自定义css页面吗？@ArshadMuhammed好的，我找到了，我在自定义css中插入了你给我的代码，效果很好。谢谢！请看答案。：）