This might be helpful.
============================================================
Script: Multiple-Color Interactive Light-Up Links Script
Functions: One of the most-asked questions in our support
mail, this very simple technique shows how to
add differently colored links to the same page
that light up and underline on mouseOver.
Browsers: IE4-6, NS6
(NS4 - partial, sets fixed color only)
(Degrades gracefully in other browsers)
Author: etLux
============================================================
Step 1.
Installation
Put the following style script in the head of your page. See
notes on modifications and use below.
<style>
<!--
A.type1:link {color:#FFDD00; text-decoration:none;}
A.type1:visited {color:#FFDD00; text-decoration:none;}
A.type1:active {color:#FFDD00; text-decoration:none;}
A.type1:hover {color:#00FF80; text-decoration:underline;}
A.type2:link {color:#FF0000; text-decoration:underline;}
A.type2:visited {color:#FF0000; text-decoration:underline;}
A.type2:active {color:#FF0000; text-decoration:underline;}
A.type2:hover {color:#ABCDEF; text-decoration:underline;}
A.type3:link {color:#00CCFF; text-decoration:none;}
A.type3:visited {color:#00CCFF; text-decoration:none;}
A.type3:active {color:#00CCFF; text-decoration:none;}
A.type3:hover {color:#FF8000; text-decoration:overline underline;}
//-->
</style>
============================================================
Step 2.
Attaching the individual styles to individual text links
This couldn't be simpler...
For a text link, just include a class="styleName" in the
<a href> tag, like this...
<a class="type1" href="http://whatever.com">click</a>
<a class="type2" href="http://whatever.com">click</a>
<a class="type3" href="http://whatever.com">click</a>
where type1, type2, and type3 are the style names in the
<style> script above.
============================================================
Notes on Modifications and Use
We've named the individual styles type1, type2 and type3
arbitrarily. You can use any name (no spaces, mixed upper-
and lowercase are acceptable).
There is no real limit on the number of individual link
styles you can use on a page. To add more, just follow the
general pattern.
To change the colors, just do the obvious -- the colors are
set in #RRGGBB exactly the same as in HTML.
The text-decoration sets how the underline will (or will
not) appear with a link.
text-decoration: none; will not show a link underline
text-decoration: underline; will show a link underline
One additional cool trick with this is to use:
text-decoration: overline underline;
which will show a line both over and under a link.
CAUTION!
One common error in use in applying these is to have tags
intervening between the <a href> and the text that is
linked. For example, this IS right...
<font size="2">
<a class="type3" href="http://whatever.com">
click
</a>
</font>
This is NOT right and may fail...
<a class="type3" href="http://whatever.com">
<font size="2">
click
</font>
</a>
Make sure the <a href>...</a> tags directly surround the
text to which you are applying the style!
============================================================I got it here (http://www.codelifter.com/main/javascript/lightuplinks1.html)