Question

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

http://cl.ly/5yiV

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

http://cl.ly/5ylG

I want it so that both lines of text change colour whether the top ‘About Me’ or the bottom ‘Who am I?’ 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?

Answer 1

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