CSSを使用して自分のサイトのサブメニューテキストの色を変更する

Question

自分のサイトの3つのサブメニュー項目（メインナビゲーションのポートフォリオの下）のテキストを青に変更したいとします。彼らは現在、白、背景と同じ色です - >www.ronanmart.in

ここでナビゲーション

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

のHTMLである「私は特異性は、トリックを行うだろうと考え、以下のCSSを追加しましたが、それはdidnの更新する。

#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; 
}