[Résolu] Menu déroulant horizontal: décale le div contenu ..

J'ose encore demander un petit conseil...mais promis je vous montrerai le résultat.
Lorsque je survole les menus, cela a pour effet de décaler le contenu au lieu que le menu s'affiche par-dessus le contenu.

http://www.cahue.net/wdvpts/html_tests/menu_horizontal/menu_horizontal.html

De même, qu'est-ce cela changerait si le menu ( ul) etait inséré directement dans le code htmlau lieu d'être inséré dans une une div "nav" comme ici

Merci
Modifié par cpalo (05 Jan 2013 - 05:47)

Bonjour,
Il me semble qu'il faut plutôt utiliser :

menu déroulant caché{
position: absolute;
margin-left:-999px;}

menu déroulant ouvert{
position: absolute;
left:0px;
width:100%;
z-index:2;}

En tout cas, c'est comme ça que fonctionne le mien

j'avais oublié de mettre mon code css:

/* ------------------------------------*/
/* RESET MINI */
/* ------------------------------------*/

	body {
		font: .8em Verdana, Arial, Helvetica, sans-serif;
	}

/* ------------------------------------*/
/* STRUCTURE DE LA PAGE                */
/* ------------------------------------*/

/* ----------container pour centrer la page et largeur de la page-------- */
#container {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}

/** NAVIGATION --- */
	#nav {
		background-color: #D0F7FD; 
		padding: 5px;
	}
/*--------début du menu de premier niveau--------*/

#menu    {                     
	width:520px;            
	height: auto;           
	list-style-type: none;  
	margin: 0 auto;         
	padding: 0;             
	border: 0;    
}
		
#menu > li    {               
	float: left;           
	width: 120px;          
	margin: 5px;           
	padding: 0;
	border: 0;
}

#menu li a    {             						 
	display: block;       					
	color: #FFFFFF;        		  			
    background-color: rgb(0, 0, 0);          
	background-color: rgba(0, 0, 0, 0.5);    
	margin: 0;                               
	padding: 4px 8px;                        
	border:1px solid #FFFFFF;                
	text-decoration: none;                   
}

#menu li a:hover {                         
      background-color: rgb(175, 214, 1);
      background-color: rgba(175, 214, 1, 0.5);
}

/*---------------fin du menu de premier niveau-------------*/

/*---------------début du menu déroulant-------------------*/

#menu .menuderoulant   {		 
	display: none;           
	list-style-type: none;  
	margin: 0;              
	padding: 0;
	border: 0;
}
#menu .menuderoulant li   {    					 
	margin: 0;
	padding: 0;
	border: 0;
	width: 140px;                			 
    border-top: 1px solid transparent;       
	border-right: 1px solid transparent;
}
#menu .menuderoulant li a  {    
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;       
    background-color:rgb(0, 0, 0);
    background-color:rgba(0,0,0,0.5);
}
#menu .menuderoulant li a:hover   {    
	background-color: rgb(18, 89, 239);
    background-color: rgba(18, 89, 239, 0.8);
}

#menu .menuderoulant li a:visited {         
      background-color:rgb(227, 22, 30);
      background-color:rgba(227, 22, 30, 0.5);
}

#menu li:hover > .menuderoulant { display: block; }    

/*----------fin du menu déroulant----------------*/

/** CONTENT --- */
	#content {
		background-color: #e5e5e5;
		padding: 5px;
	}

Ajoute juste un position absolute à #menu .menuderoulant