[Résolu] Menu déroulant récalcitrant

Voilà bien une semaine que je suis bloquée avec ça.

Pour un site, je dois prévoir une navigation horizontale et un déroulant sur l'une des options. J'ai réussis a faire quelque chose en CSS, mais lorsqu'au survol, le déroulant apparait, la div qui est en dessous est décallée...

J'ai chercher des solutions en jQuery, mais rien ne fonctionne (surement parce que je suis pas super douée et que je débute en JS...)

Bref, voici le code de ma navigation et son css :

     <ul id="navigation">
        <li class="nav"><a href="#">Le Groupe</a></li>
        <li class="nav"><a href="#">Lien déroulant</a>
        	<ul>
        	<li><a href="#">Option 1</a></li>
        	<li><a href="#">Option 2</a></li>
        	<li><a href="#">Option 3</a></li>
        	</ul>
        </li>
        <li class="nav"><a href="#">Les Services</a></li>
        <li class="nav"><a href="#">Tarifs</a></li>
        <li class="nav"><a href="#">Caen</a></li>
        <li class="nav"><a href="#">R&eacute;servations</a></li>
        <li class="nav"><a href="#">Contact</a></li>
    </ul>

#navigation ul { list-style-type: none;
}	

#navigation li.nav {
	float: left;
}

#navigation li.nav a {
	display: block;
	padding: 5px 15px 2px 15px;
	text-decoration: none;
}

#navigation li.nav a:hover {
	text-decoration: underline;
}

#navigation li.nav ul {
	display: none;
	text-align: left;
	position: relative;
}

#navigation li.nav:hover ul {
	display: block;
}

#navigation li.nav ul li a {
	padding: 4px;
	height: 18px;
	background-color: #ff8000;
}

#navigation li.nav ul li a:hover {
	background-color: #ffaa5c;
	text-decoration: none;
}
 
/* --- style de la navigation --- */
#navigation a {
	color: white;
}

#navigation ul li a:hover {
	text-decoration: underline;
}

Dessous il y a un div qui sert de wrap a 2 autres avec le code suivant :

#container_bleu {
	background-image: url(../images/bleu_bg.jpg);
	background-repeat: repeat-y;
	margin: auto;
	clear: both;
	width:850px;
	height: 240px;
}
#bleu_left_contenu{
	margin-left:20px;
}
#container_bleu h1 {
	color: #FFFFFF;
}
#bleu_left {
	width: 560px;
	background-color: #90CDCC;
	float: left;
}
#bleu_left ul {
	margin-left: 3em;
}
#bleu_right {
	float:right;
	background-color: #53B1B4;
	width: 220px;
}
#bleu_right_contenu{
	margin-right:20px;
}

PS : j'ai bien fait le tour du forum, mais n'ai rien trouver qui corresponde à mon soucis
Modifié par Redink (18 Jun 2010 - 13:30)