Referencing Sharepoint menu items

Referencing Sharepoint menu items

Hello
 
I got a design for a site which sets the top menu items to be of different colours. I couldn't figure it out without use of jQuery and have also problems with that as well. I have to implement it with Sharepoint and it more or less defines the menu markup as below:
 
<div class="menu horizontal menu-horizontal">
<ul class="root static">
<li class="static"><a class="static menu-item" title="Subsite" href="/Pages/default.aspx" accesskey="1"><span class="additional-background"><span class="menu-item-text">Front page</span></span></a>
<ul class="static">
<li class="static dynamic-children selected"><a class="static dynamic-children selected menu-item" title="Subsite" href="/menu1/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Menu 2</span><span class="ms-hidden">Currently chosen</span></span></a><ul class="dynamic">
<li class="dynamic"><a class="dynamic menu-item" href="/menu1/Pages/Additional.aspx"><span class="additional-background"><span class="menu-item-text">Additional info</span></span></a></li><li class="dynamic"><a class="dynamic menu-item" href="/menu1/Pages/Testing.aspx"><span class="additional-background"><span class="menu-item-text">Choice 2</span></span></a></li>
</ul></li>
<li class="static dynamic-children"><a class="static dynamic-children menu-item" title="Subsite" href="/menu2/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Menu 3</span></span></a>
<ul class="dynamic">
<li class="dynamic"><a class="dynamic menu-item" title="Subsite" href="/menu2/Pages/Background.aspx"><span class="additional-background"><span class="menu-item-text">Background</span></span></a></li>
</ul></li><li class="static dynamic-children"><a class="static dynamic-children menu-item" title="Subsite" href="/games/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Games</span></span></a><ul class="dynamic">
<li class="dynamic"><a class="dynamic menu-item" href="/games/Pages/Great-game.aspx"><span class="additional-background"><span class="menu-item-text">Great game</span></span></a></li><li class="dynamic"><a class="dynamic menu-item" href="/fi/games/Pages/Quiz.aspx"><span class="additional-background"><span class="menu-item-text">Quiz</span></span></a></li>
</ul></li>
</ul></li>
</ul>
</div> 















I would like to reference the texts: Menu 2, Menu 3 and Games to handle the colours in jQuery.
 
My try so far is like below:
 

$(document).ready(

function () {

$(

".s4-tn ul.root .static .static .additional-background .menu-item-text:eq(3)").css("color", "#eebc15");

$(

".s4-tn ul.static > li.static .additional-background .menu-item-text:eq(2)").css("color", "#2e2efc");

$(

".s4-tn ul.static > li.static .additional-background .menu-item-text:eq(1)").css("color", "#9b25e9");

});
 
but the problem is that the colours "bleed" to the (dynamic) submenus, so the colours go to the "Additional Info" and "Choice 2"
 
I just can't figure it out, please help me :)
 
hank