CSS: Menu text hover effects (dual styles) help required

Been trying to figure this one out for a while, and decided to see if any of you could offer some light on the subject.

I have a menu/navigation with the page title in bold at the top, and a lighter description beneath it (see image below).

When hovered over, I want the menu items to display as follows:

I want it so that both lines of text change colour whether the top 'About Me' or the bottom 'Who am I?开发者_StackOverflow中文版' is hovered over.

At the moment, I'm currently only able to get either line to change colour on hover.

Could anybody please help me to solve this?

You should be able to do it if you wrap both parts into a link like:

<a href="#">ABOUT ME<span>Who Am I?</span></a>

Then you can use styling like:

a:hover {color:blue;}
a:hover span {color:red;}

You would of course use more sofisticated styling with use of classes.. but you should get the point from my simple example (If I understood your question correctly.)

Edit: working example

the 'hover' event is triggered once you actually "hover" over a selected object. If the img that you're posting is only one object itself, I think you'll have to divide it into 2 pieces and then put them together, that way you can set the hover trigger into both objects and you'll get the desired result.