28172 sujets

CSS et mise en forme, CSS3

Problème avec menu (css et z-index)

Bonjour à tous,

Je développe un site pour un ami et j'ai le problème suivant avec le menu :
-Il s'affiche correctement avec ie8, firefox, chrome, safari, etc... Smiley smile
-Avec ie6 et ie7 le menu se déroule mais apparaît derrière l'image... Smiley decu

le code js du menu :


//au chargement de la page, on appelle la fonction montre()
window.onload=montre;
 
//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
	var d = document.getElementById(id);
	//si on quitte un élément du menu
	if (d && !affiche) 
	{
		d.style.display='none'; //on l'efface
		var c=d.parentNode; //son parent
		if (c.parentNode.parentNode.parentNode.tagName!='DIV')  //si c'est un sous-menu, on rend à son parent les couleurs d'origine
		{
			c.firstChild.style.color='#39f';
			c.firstChild.style.background='#fff';
		}
	}
	//sinon si on se mets sur un élément du menu
	else if (d && affiche)
	{
		d.style.display='block'; //on l'affiche
		var c=d.parentNode; //son parent
		if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on donne à son parent les couleurs de survol
		{
			c.firstChild.style.color='#fff';
			c.firstChild.style.background='#39f';
		}
	}
}


Le code css du menu :


#menu {
margin:0px;
padding:0px;
}
 
a {  
color:#000000;
text-decoration:none;
text-transform:none;
}
 
/****************************/
/* 	début menu	déroulant	*/
/****************************/
#menu h2 {
color: #606060;
font-size: 14px;
margin: 0px;
padding: 0px;
}
#menu ul, li {
list-style-type:none;
margin:0px;
padding:0px;
}
 
/*chaque sous-menu*/
#menu ul li {
text-align:center;
position:relative;
float:left;
width:150px;
cursor:pointer;
display:block;
background:none;
height:24px;
z-index:9999;
border-right: 1px solid #606060;
margin:0px;
padding:0px;
background:#F2F2F2;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:150px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
z-index:9999;
}
 
#menu ul li ul li {
height:100%;
border: 0px;
}
 
#menu ul li ul li a {
color:#3399ff;
font-size:14px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
padding:5px;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
background:#3399ff;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
left:-127px;
}


Merci de votre aide pour me sortir de cette petite impasse.

Cordialement

Jérôme
Modifié par Jerome281 (22 Jan 2012 - 18:23)
Sujet clos
Aller à