CSS无法在Chrome上运行，但适用于Firefox和IE

Question

http://foodstylingmentor.com

这是一个WordPress网站。您可以在ABOUT ME菜单项下看到子菜单项。 Firefox和IE正在关注CSS，但Chrome没有关注。我已经清除了所有浏览器的缓存和历史记录。

@media screen and (min-width: 600px) {

    .main-navigation li ul li a:hover {
    background: #efefef !important;
    color: #7b0309 !important;
    }    
}

我也尝试删除@media等但仍然无法正常工作。

我已经搜索并试图找到解决方案。但失败了。所以，如果有人可以帮助我，请这样做。

Answer 1

这种情况正在发生，因为您将背景设置为background: #efefef;

在.main-navigation li ul li a班级中添加：

background: -webkit-linear-gradient(#f7eabf, #936d28, #f7eabf, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

，文本应显示为父文本。添加上述内容会导致出现灰色（ish）颜色：

.main-navigation li ul li a:hover 
{
    background: #efefef !important;
    color: #7b0309 !important;
}