Ho creato un menù così costruito:

per il CSS:

codice:
ul {margin: 0px; padding: 0;  list-style:none; width:182px;}
ul li a {display:block; text-decoration:none;}
ul li {display:inline}
ul li a:hover, ul li a:active {background-color:#174880; border:1px; border-color:#FFEFBF; border-style: solid;}
Per l'HTML:

codice:
<ul>[*]Pagina 1[*]Pagina 2[*]Pagina 3[/list]

Ciò che non riesco a evitare è l'o spostamento di un pixel dovuto al bordo che compare nell'effetto rollover. In pratica vorrei che le scritte rimanessero immobili e il bordo compaia intorno al link senza creare spostamenti. Qualcuno sa aiutarmi?
Grazie.

PS: Se non mi sono spiegato bene, di seguito il codice completo per rendere l'idea:

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>rollover</title>
<style type="text/css">
<!--
ul {margin: 0px; padding: 0;  list-style:none; width:182px;}
ul li a {display:block; text-decoration:none;}
ul li {display:inline}
ul li a:hover, ul li a:active {background-color:#174880; border:1px; border-color:#FFEFBF; border-style: solid;}
a:link {color: #00FFFF;}
a:hover, a:active {color: #FFEFBF;}
body {
	background-color: #000033;
}
-->
</style>
</head>
<body>
<ul>[*]1 xxxxx xxxxx xxxxx xxxxx xxxxx [*]2 xxxxx xxxxx xxxxx xxxxx xxxxx [*]3 xxxxx xxxxx xxxxx xxxxx xxxxx [/list]
</body>
</html>