codice:
#header{
    width:800px;
	height:250px;
	background-image:url(immagini/agriturismo.jpg);
	margin:0px auto;
}
#prenotazioni{
    position:relative;
	top:20px;
	right:20px;
    width:25px;
	height:140px;
	float:right;
/*	margin-right:20px;
	margin-top:20px;
*/	background-image:url(immagini/prenotazioni.png);
	font-size:11px;
	overflow:hidden;
	z-index:20;
}
#menu{
    position:relative;
	top:200px;
	left:20px;
    width:760px;
	height:27px;
/*	margin-top:200px;
	margin-left:20px;
*/	background-image:url(immagini/bgmenu.png);
    z-index:5;
}
codice:
<div id="header">
    <div id="prenotazioni">...</div>
    <div id="menu">...</div>
</div>
I box prenotazioni e menu sono contenuti nel box header.
Il box prenotazioni è espandibile (tramite javascript) in larghezza, da 25px a 250px.
Quando però questa accade il box con il menu non resta fermo al suo posto.
Ho provato ad usare due z-index diversi ma comunque il ridimensionamento del box prenotazioni influenza il box menu.

Come ovviare?

Grazie
Luca