hi,
i am trying to figure out how to make a css code that when hovered the link has a dotted underline and the text and underline are two different colors.
any help would be appreciated!

a:hover { color: #000000; border-bottom: 1px dotted #FF0000; }

Add that to the CSS. You can change the colours and add whatever extra attributes you want. The dotted border at 1px might look like dashed in some browsers though, and you'll need it at a bigger size to show it dotted.

In your stylesheet:

A:hover {color:COLOROFLINK; border-bottom:1 dashed COLOROFUNDERLINE; }

<edit>
Oh... beaten to it, heh. And I see you said dotted instead of dashed... they're similar, dashed has larger pieces that are more line-like than dots.
</edit>