使用CSS更改我网站上子菜单文本的颜色

Question

我想将我网站上3个子菜单项（在主导航中的投资组合下）的文本更改为蓝色。它们目前是白色的，与背景颜色相同 - ＆gt; www.ronanmart.in

这是导航的HTML

<div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="menu"><li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-166"><a href="http://ronanmart.in/blog/">Blog</a></li>
<li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-168"><a href="http://ronanmart.in/portfolio/">Portfolio</a>
<a class="expand" href="#"></a>
<ul class="sub-menu">
    <li id="menu-item-342" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-342"><a href="http://ronanmart.in/digital-marketing/">Digital Marketing</a></li>
    <li id="menu-item-339" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-339"><a href="http://ronanmart.in/creative-media/">Creative Media</a></li>
    <li id="menu-item-476" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-476"><a href="http://ronanmart.in/ubikwitty/">Ubikwitty</a></li>
</ul>
</li>
<li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-172"><a href="http://ronanmart.in/about/">About</a></li>
<li id="menu-item-171" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-171"><a href="http://ronanmart.in/contact/">Contact</a></li>
</ul></div>

我添加了以下CSS，认为特异性可以解决问题，但它没有更新。

#menu-item-342 {
    color: #4486bf;
}

#menu-item-339 {
    color: #4486bf;
}

#menu-item-476 {
    color: #4486bf;
}

感觉我错过了一些明显但却无法理解的东西。

由于

Answer 1

好的。你快到了。您只需要定位<a>即可。原因是你需要为链接提供颜色，而不是像其他元素一样自动inherit。将您的代码更改为以下任一项：

#menu-item-342 a {
  color: #4486bf;
}

#menu-item-339 a {
  color: #4486bf;
}

#menu-item-476 a {
  color: #4486bf;
}

另请注意，由于您具有相同的定义，因此可以将它们全部组合在一起：

#menu-item-342 a,
#menu-item-339 a,
#menu-item-476 a {
  color: #4486bf;
}

预览

Answer 2

您需要的是以下内容：

ul.submenu li a {
  color: blue;
}

Answer 3

使用

#menu-item-342 a, #menu-item-339 a, #menu-item-476 a {
   color: #4486bf;
}