3 Teir CSS menu, anchor colour change - help

[Be Loud Online]

I have made a CSS only 3 teir nav bar, but am having trouble with one issue. When you hover over the anchor it changes colour. But if you hover over first teir and it reveals the second teir, when you move off the first teir anchor it returns to the original color.



I need the first teir to remain in "hover mode" - same color as if it was beign hovered over - even if I move off to the third teir. How can I do this in CSS?



As an example:



Here is the HTML:




<ul><li>First Teir

<ul><li>Second Teir

<ul><li>Third Teir

</li>

</ul>

</li>

</ul>

</li>

</ul>



Here is the CSS:






ul

{

list-style:none;

}



li a,

li li a,

li li li a

{

color:#FFF;

}



li a:hover,

li li a:hover,

li li li a:hover

{

color:#000;

}



ul ul,

ul li:hover ul ul,

ul ul li:hover ul ul

{display: none;}



ul li:hover ul,

ul ul li:hover ul,

ul ul ul li:hover ul

{display: block;}