hover link border

I'm working on a site that is going to have the menu be links with no border or underline. On hover there will be a border on all four sides. My problem is that when the hover effect takes place the text is pushed to the right where the border was.

a.menu:link {color: #C30B0B; 
	font-family: Arial;
	font-size: 14pt;
	text-decoration: none;
 }

a.menu:visited {color: #C30B0B; 
	font-family: Arial;
	font-size: 14pt;
	text-decoration: none;
 }

a.menu:hover {color: #C30B0B; 
	font-family: Arial;
	font-size: 14pt;
	text-decoration: none;	
	border-width: thin;
	border-style: solid;
	border-color: #C30B0B;	
}

Code (markup):

 

A simple work-around is to make the border of background color for the link, then color it for the hover.

a {
    border: 1px solid white;  /*assuming background is white*/
    }

a:hover {
    border-color: green;
    }

Code (markup):

cheers,

gary

 

that worked thanks for the help.. my design got turned down anyhow! Gotta redo things, guess i made it a little too new tech like.