problema drop down menu

[hulk]

Buongiorno a tutti,
sono alle prime armi con i css e ho un piccolo problema con un menu dropdown (orizzontale). Semplicemente, quando compaiono le voci dei sottomenu, queste non si dispongono al di sopra degli elementi che seguono, ma ne occupano lo spazio causando una "distorsione" di tutto il layout (un effetto ballerino della pagina...).
Cosa sbaglio? Come risolvere?

Ringrazio in anticipo per l'aiuto.

[catsniffer]

Puoi postare il codice?

[hulk]

L'html:

<div id="menuwrapper">  		<ul id="bar">  			[*]<s:link value="Home"/>  			[*]  				<s:link value="Autorizzazioni"/>  				<ul>  					[*]<s:link value="Nuove"/>  					[*]<s:link value="Da Correggere"/>  					[*]<s:link value="Da Approvare"/>  				[/list]			  			[*]  				<s:link value="Anticipi"/>  				<ul>  					[*]<s:link value="Nuovi"/>  					[*]<s:link value="Da Correggere"/>  					[*]<s:link value="Da Approvare"/>  					[*]<s:link value="Da Firmare"/>  				[/list]			  		[/list]	</div>  	  	<div>  		<h1>...altro...</h1>  	</div>  	<div>  		<h1>...altro...</h1>  	</div>  	<div>  		<h1>...altro...</h1>  	</div>  	<div>  		<h1>...altro...</h1>  	</div>

Il css:

#menuwrapper {  			background-color: #FFF;  			color: #000;  			height: 50px;  		}  		#bar, #bar ul {  			padding: 0;  			margin: 0;  			list-style: none;   		}  		#bar a {  			display: block;  			text-decoration: none;  			color: #666;  			  			width: 12em;  			padding: 0.5em;  			margin: 0.1em;  		}  		#bar li {  			float: left;  		}  		#bar li ul, #bar ul li  {  			width: 12em;   		}  		#bar ul li a  {  			padding: 0.5em;  			  			width: 12em;  		}  		#bar li ul {  			display: none;  		}  		#bar li:hover a, #bar a:focus,  		#bar a:active {  			color: #FFF;  			background-color: #333;  		}  		#bar li:hover ul {  			display: block;  		}  		#bar li:hover ul a {  			color: #000000;  			color: #888;  			background-color: #FFF;  		}  		#bar ul a:hover {  			background-color: #FFF !important;  			color: #000 !important;  		}

javascript:void(0);