Afficher/masquer une div

Bonjour,
Je souhaite afficher/masquer une div au survol d'un lien (un peu dans le style du site Yves Rocher).

Ma contrainte, c'est que mon contenu central a une taille fixe, et centré au milieu de ma page. Je souhaite que le calque affiché soit aussi large que mon contenu central...

Je suis parti sur ce code js:

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[ i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[ i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Pour le code html:

<div id="container">

<ul id="nav">

	<li><a href="#">menu1</a></li>

	<li><a href="#">menu2</a>
		<ul>
			<li><a href="#">sous-menu1</a></li>
			<li><a href="#">sous-menu2</a></li>
			<li><a href="#">sous-menu3</a></li>
			<li><a href="#">sous-menu4</a></li>

		</ul>
	</li>

	<li><a href="#">menu3</a></li>
</ul>

... et mon code css:

#container {
	width: 900px;
	text-align: left;
	margin: 0 auto;
}

#nav, #nav ul {
	background-color: navy;
	float: left;
	list-style: none;
	padding: 0;
	margin: 0 0 1em 0;
}

#nav a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 0.5em;
}

#nav li {
	float: left;
	padding: 0;
	width: 10em;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 900px;
	margin: 0;
	background-color: red;
}

#nav li li {
	padding-right: 1em;
	width: 13em
}

#nav li ul a {
	width: 13em;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: 0;
}

#nav li.sfhover {
	background: orange;
}

En mettant mon #nav li:hover ul, #nav li.sfhover ul à left: 0; la div affichée se met bien évidemment au bord de ma fenêtre.
La question est de savoir comment mettre cette div au même positionnement que mon contenu central...

Merci pour vos pistes!
Modifié par speedlab (11 May 2010 - 19:01)