Ciao a tutti,
ho un problema con un menu, spero possiate aiutarmi.

In pratica nel mio caso ho una voce di menu che al suo rollover apre la lista di link del menu stesso, questo grazie ad un piccolissmo js.

Il problema è che quando si apre il menu il contenuto del mio sito scende completamente, anzichè restare fisso e di livello sotto il menu.

Ho provato a giocare coi vari z-index ma niente

In questo esempio vedete che non appena si apre il menu, il contenuto nel div in basso scende di posizione, anzichè farsi accavallare dal menu stesso:

codice:
<html>
<head>
<title>CSS Dropdown</title>

<style type="text/css">

	/* General */
	#cssdropdown, #cssdropdown ul { list-style: none; }
	#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
	
	/* Head links */
	#cssdropdown li.headlink { float: left; margin-left: -1px; text-align: center; }
	#cssdropdown li.headlink a { display: block; padding: 5px; }

	/* Child lists and links */
	#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
	#cssdropdown li.headlink:hover ul { display: block; }
	#cssdropdown li.headlink ul li a { padding: 5px; height: 17px; }
	#cssdropdown li.headlink ul li a:hover { background-color: #333; }
	
	/* Pretty styling */
	body { font-family: verdana, arial, sans-serif; font-size: 0.8em; background-color: black; }
	#cssdropdown a { color: white; } #cssdropdown ul li a:hover { text-decoration: none; }
	#cssdropdown li.headlink { background-color: red; background-image: url(bg.gif); }
	#cssdropdown li.headlink ul { background-image: url(bg.gif); background-position: bottom; padding-bottom: 10px; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<script language="JavaScript">
	window.onload = function()
	{
		var lis = document.getElementById('cssdropdown').getElementsByTagName('li');
		for(i = 0; i < lis.length; i++)
		{
			var li = lis[i];
			if (li.className == 'headlink')
			{
				li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
				li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
			}
		}
	}
	
</script>
</head>

<body>
	<ul id="cssdropdown">

		<li class="headlink">
			Preferiti

			<ul>
				[*]Google
				[*]Yahoo
				[*]Live Search
			[/list]
		

	[/list]


<div style="background-color:yellow; z-index:10; display:block;">ciao a tutti</div>
</body>
</html>
Che posso inventarmi?