slittamento menu con effetto bordo top su hover

[gabar-el]

ciao, sto dando un effetto hover con bordo alto a un menu, ma mi slitta verso il basso e non riesco a risolvere. qualcuno sa dirmi che regola applicare per far si che non ci sia slittamento?

html:
<div id="menuUp">
		<ul id="navUp">
			[*]****
			[*]*****
		[/list]
	</div>

css:
div#menuUp, div#menuDown {
		width: auto;
		height: 40px;
		margin: 0 25px;
		text-align: left;
		background-color: #e7ebef;
	}
		ul#navUp, ul#navDown {
			padding-top: 10px;
			margin-left: 25px;
			text-align: center;
			list-style-type: none;
		}
			ul#navUp li, ul#navDown li {
				padding: 0 0.5em;
				float: left;
			}
				div#menuUp a, div#menuUp a:link, div#menuUp a:visited, div#menuUp a:active,
				div#menuDown a, div#menuDown a:link, div#menuDown a:visited, div#menuDown a:active {
					font: 1em Verdana, Arial, Helvetica, sans-serif;
					color: #000;
					text-transform: uppercase;
					text-decoration: none;
					display: block;
				}
				div#menuUp a:hover, div#menuUp a:focus {
					border-top-width: 5px;
					border-top-style: solid;
					border-top-color: #000;
				}
				div#menuDown a:hover, div#menuDown a:focus {
					border-bottom-width: 5px;
					border-bottom-style: solid;
					border-bottom-color: #000;
				}

[gabar-el]

ho risolto così, con dei margin appropriati a ul e a in questione:

div#menuUp a, div#menuUp a:link, div#menuUp a:visited, div#menuUp a:active,
				div#menuDown a, div#menuDown a:link, div#menuDown a:visited, div#menuDown a:active {
					margin-top: 10px;
                                        font: 1em Verdana, Arial, Helvetica, sans-serif;
					color: #000;
					text-transform: uppercase;
					text-decoration: none;
					display: block;
				}
				div#menuUp a:hover, div#menuUp a:focus {
					margin-top: 5px;
                                        border-top-width: 5px;
					border-top-style: solid;
					border-top-color: #000;
				}