Using CSS to change the color of sub-menu text on my site

Question

I want to change the text of the 3 sub-menu items (under portfolio in the main navigation) on my site to blue. They are currently white and the same color as the background --> www.ronanmart.in

Here is the HTML of the navigation

<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>

I added the following CSS, thinking that specificity would do the trick but it didn't update.

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

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

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

Feels like I'm missing something obvious but can't figure it out.

Thanks

Answer 1

Use

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

Answer 2

What you need is the following:

ul.submenu li a {
  color: blue;
}

Answer 3

Okay great. You are almost there. You just need to target <a>. The reason is you need to give the colour for the links and they don't automatically inherit like the other elements do. Change your code to either of the below:

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

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

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

Also, note that since you have same definition, you can combine them all:

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

Preview