Problème menu déroulant avec javascript

Bonjour,

Je vous explique mon problème . J'utilise un script java pour faire des menus déroulants le problème ses que lorsque je passe sur mon menu les élément plus bas sont tous décaller.Voir le problème:

http://www.agrobiopole.ca/agrobiopole/test/index.html

J'aimerait bien que mes bloc reste a leur place et que le menu descende par dessu.

Merci a l'avance de votre aide


Voici le css pour le code source de la page il est accessible

body {
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "ARIAL" ;
	background: #003a62 ;
} 

dl, dt, dd, ul, li 
{
margin: 0;
padding: 0;
list-style-type: none;
}



div#conteneur
{
	width: 780px ;
	height: 1100px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #ab4 ;
	background: #fff ;
}




h1#header_fr
{
	height: 184px;
	margin: 0 auto ;
	background: url(banniere.png) no-repeat ;
	background-position: top left ;
}

h1#header_en
{
	height: 184px;
	margin: 0 auto ;
	background: url('banniere.png') no-repeat ;
	background-position: top left ;
}


#menu {
	height: 45px ;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;

}
#menu dl {
float: left;
text-align: center ;
}
#menu dt {
cursor: pointer;
	background: url('menu1.png') repeat-x 0 0px ;
	width: 150px ;
	line-height: 45px ;
	font-size: 8pt;
	font-weight: bold ;
	letter-spacing: 1px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
}
#menu dd {
display: none;

}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
	background: url('menu1.png') repeat-x 0 0px ;
	width: 150px ;
	line-height: 45px ;
	font-size: 8pt;
	font-weight: bold ;
	letter-spacing: 1px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus 
{
background: url('menu2.png') repeat-x 0 0px ;
}


div#main
{

	
	width: 530px ;
	height: 694px ;
	margin: 2 auto ;
	text-align: left ;
	border: 2px solid #614700 ;
	background: url('background.png') no-repeat ;
	float: left;
	
	
}


div#main h2
{
	padding-left: 30px ;
	line-height: 28px ;
	font-size: 1.4em ;
	background: url('becher2small.gif') no-repeat ;
	color: #AD6200 ;
	border-bottom: 1px solid #003a62 ;
}
/* Mise en forme du titre de page, une petite image, on décale le texte en fonction de l'image, on donne un couleur au texte et on met une bordure basse */

div#main h3
{
	margin-left: 15px ;
	padding-left: 15px ;
	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
}
/* De même que pour le titre h2, à ceci près qu'on ne donne pas d'image décorative cette fois ci */

div#main p
{
	padding-left: 15px ;
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}
/* On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */

div#main ul
{
	padding-left: 15px ;
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}


div#partenaire
{

	
	width: 240px ;
	height: 210px ;
	margin: 2 auto ;
	text-align: left ;
	border: 2px solid #614700 ;
	float: right;
	
	
}

div#evenement
{

	
	width: 240px ;
	height: 300px ;
	margin: 2 auto ;
	text-align: left ;
	border: 2px solid #614700 ;
	float: right;
	
	
}


div#pied {
clear : both; 
padding : 2px; 
text-align : center; 
border-color : white; 
/*border-style : solid; 
border-width : 1px; */
} 
div#pied p {
height : 8px; 
}

Modifié par frafro (19 Mar 2007 - 21:04)

Hello,

a écrit :
Voici le css pour le code source de la page il est accessible

Non.

A cause de cela :

#menu dd {
display: none;

}

Si l'utilisateur n'a pas Javascript, il ne verra pas les liens compris dans ton menu car CSS les cache... Faut supprimer ce bout de code.

Par ailleurs, tu places ta liste dl en float: left; ainsi que ton bloc main... d'où ce comportement...
Il faut supprimer ces positionnements flottants puis positionner ton menu en absolu tout en laissant ton bloc main dans le flux du document.

ok j'ai fait des tests et j'ai le probleme.

http://www.agrobiopole.ca/agrobiopole/test/index.html

c'est que si je met mon menu en absolut et ben dépendamment de la taille de l'écran il ne sera pas toujours au bons endroit. car ma page est centrer peut importe la taille de l'écran.


Et je me sert des float pour positionner mes élément. En IE sa se positionne seul mais en Firefox l'ordre voulu n'est plus respecter sans les float.

SVP aider moi

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "ARIAL" ;
	background: #003a62 ;
}

dl, dt, dd, ul, li 
{
margin: 0;
padding: 0;
list-style-type: none;
}

div#conteneur
{
	width: 780px ;
	height: 1100px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #ab4 ;
	background: #fff ;
}

h1#header
{
	height: 184px;
	margin: 0 auto ;
	background: url('banniere.png') no-repeat ;
	background-position: top left ;
}


#menu {
	height: 45px ;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;

}
#menu dl {
float: left;
text-align: center ;
}
#menu dt {
cursor: pointer;
	background: url('menu1.png') repeat-x 0 0px ;
	width: 150px ;
	line-height: 45px ;
	font-size: 8pt;
	font-weight: bold ;
	letter-spacing: 1px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
}
#menu dd {


}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
	background: url('menu1.png') repeat-x 0 0px ;
	width: 150px ;
	line-height: 45px ;
	font-size: 8pt;
	font-weight: bold ;
	letter-spacing: 1px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus 
{
background: url('menu2.png') repeat-x 0 0px ;
}

div#contenu
{

	
	width: 530px ;
	height: 694px ;
	margin: 2 auto ;
	text-align: left ;
	border: 2px solid #614700 ;
	background: url('background.png') no-repeat ;
	//float: left;
	
	
}


div#contenu h2
{
	padding-left: 30px ;
	line-height: 28px ;
	font-size: 1.4em ;
	background: url('becher2small.gif') no-repeat ;
	color: #AD6200 ;
	border-bottom: 1px solid #003a62 ;
}
/* Mise en forme du titre de page, une petite image, on décale le texte en fonction de l'image, on donne un couleur au texte et on met une bordure basse */

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 15px ;
	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
}
/* De même que pour le titre h2, à ceci près qu'on ne donne pas d'image décorative cette fois ci */

div#contenu p
{
	padding-left: 15px ;
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}
/* On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */

div#contenu ul
{
	padding-left: 15px ;
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}

div#partenaire
{

	
	width: 240px ;
	height: 100px ;
	margin: 2 auto ;
	text-align: left ;
	border: 2px solid #614700 ;
	//float: right;
	
	
}

div#evenement
{

	
	width: 240px ;
	height: 300px ;
	margin: 2 auto ;
	text-align: left ;
	border: 2px solid #614700 ;
	//float: right;
	
	
}



p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ;
}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */

Modifié par frafro (20 Mar 2007 - 15:31)