effetto linguetta tirata in menu in stato hover, possibile solo in menu basso?

[gabar-el]

ciao, stavo provando ad effettuare un effetto linguetta tirata su un menu. Se lo applico in un menu basso (cioè dall'altro verso il basso) riesco bene, ma se provo in un menu altro no, poichè l'effetto hover avviene sempre verso il basso, non riesco a capire come sistemare, forse non ci si riesce, ma chiedo per ignoranza....

html:

	<div class="menu">
		<ul id="navUp">
			[*][salta il men&ugrave; informativo]
			[*]scorciatoie
			[*]accessibilit&agrave;
		[/list]
	</div>

css:

	div.menu {
		width: 750px;
		height: 40px;
		margin-left: 25px;
		text-align: left;
		background:#000
	}
		ul#navUp, ul#navDown {
			list-style-type: none;
			text-align: center;
		}
		ul#navUp {
			padding-top: 16px;
		}
			ul#navUp li, ul#navDown li{
				margin: 0 0.2em;
				float: left;
			}
ul#navUp a {
					padding: 0.3em 0 0.1em;
				}
a#scoAcc, a#scoAcc:link, a#scoAcc:visited, a#scoAcc:active {
					width: 160px;
					background: url(images/menu/bgScoAcc.png) top left no-repeat;
				}
				a#scoAcc:hover, a#scoAcc:focus {
					padding: 0.8em 0 0.4em;
					margin: 0 0 0.8em;
					background: url(images/menu/bgScoAccHover.png) top left no-repeat;
				}

grazie a chiunque avrà voglia di mettercisi....
ciao

[fcaldera]

non capisco cosa dovrebbe succedere all'hover, dal codice che hai postato non è molto chiaro (cambi solo margin, padding e background). Puoi postare un link con il menu in questione?

[gabar-el]

l'effetto è questo: http://www.cssplay.co.uk/menus/snazzymenu2.html
quello basso mi riesce, quello alto no.
se mi metto a guardare questo codice probabile ci salti fuori, ma cercavo di capire per logica perchè il menu altro riesco a farlo slittare solo verso il basso, mentre come si vede da qui per ottenere quell'effetto deve slittare verso l'alto.
grazie

[gabar-el]

forse non mi son spiegato bene, anche perché nell'esempio che ho linkato sono invertiti i menu.
ho ul logo centrale, sotto di esso c'è il menu che nell'es. è chiamato up, sopra quello down.
ora, io in entrambi i menu ottengo un effetto di traslazione verso il basso, che per quello basso è ok, ma per quello altro ovviamente no, dovrei ottenere un effetto inverso, cioè verso l'altro, invece ottengo un effetto verso il basso che mi fa slittare il logo.
ho provato a invertitre i pagging e molto altro, ma non riesco a saltarci fuori, l'es. purtroppo struttura tutto in maniera diversa e faccio fatica a orientarmi....
grazie

[gabar-el]

sono riuscito a risolvere, anche se non ho ancora testato su tutti i browser.
praticamente per l'effetto verso l'alto si gioca non solo con i padding, ma anche con un margin-top negativo che va a colmare la mancanza annullando l'effetto di cui dicevo che fa traslare tutto verso il basso. In neretto la specifica.
cmq questo è il css:

	div.menu {
		width: 750px;
		height: 40px;
		margin-left: 25px;
		text-align: left;
		background:#000
	}
		ul#navUp, ul#navDown {
			height: 40px;
			list-style-type: none;
			text-align: center;
		}
		ul#navUp {
			padding-top: 16px;
		}
			ul#navUp li, ul#navDown li{
				margin: 0 0.2em;
				float: left;
			}
				a.nascondi {
					position: absolute;
					top: -10000px;
					left: -10000px;
				}
				div.menu a {
					font: 1em Verdana, Arial, Helvetica, sans-serif;
					color: #999;
					text-transform: uppercase;
					text-decoration: none;
					display: block;
				}
				ul#navDown a {
					padding: 0.1em 0 0.3em;
				}
				ul#navUp a {
					padding: 0.3em 0 0.1em;
				}
				a#scoAcc, a#scoAcc:link, a#scoAcc:visited, a#scoAcc:active {
					width: 160px;
					background: url(images/menu/bgScoAcc.png) top left no-repeat;
				}
				a#scoAcc:hover, a#scoAcc:focus {
					padding: 0.4em 0 0.8em;
					margin-top: -0.8em;
					background: url(images/menu/bgScoAccHover.png) bottom left no-repeat;
				}