Pop-up text problem

[ewallace]

I'm trying to get a pop-up text decoration (idea from http://meyerweb.com/eric/css/edge/popups/demo.html) on my links (that are aligned to the right) so that when someone hovers over it with a cursor extra text appears, like so:

link
>hover
link
link

This is the relevant section of my style sheet.

#navigation a span {display: none;}

#navigation a:hover span {display: block;
color: #0027ff;
font-weight:500;
page-break-after:avoid;
}

So far, this is working well, except that when I hover, it pushes the text to the right to make space for the ">" and the last letter or two disappears off to the right. The left edge of the text is where it was before, but now there isn't space for the whole word. I don't want my links to move when I hover over them, I want the extra text to appear further to the left. Any suggestions on changes I can make to avoid this problem, or other ways of getting the same effect.?

Thanks

[ewallace]

Well, I realised there was one error in that I should have put

div#navigation..., so I fixed that. But I still have a similar problem, except at the moment, the ">" pushes the text after it down to the next line, which is even worse.
-E

[comteck]

You can do this with the image tag using "alt". For example:
<img src="image.jpg" width="30%" alt="Home">

However, on a link, I have never seen it done. You can use "onmouseover" with a link to change it's color: For Example:
<a href="www.mysite.com" onMouseOver="this.style.color='#CD5C5C'" onMouseOut="this.style.color='#1589ff'">

Not sure if this is what you're looking for.
comteck