28173 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai récupéré un menu vertical pas trop mal fait sur ce site :
http://www.cssplay.co.uk/menus/flyoutt.html

Je l'ai arrangé pour que les sous-menus s'ouvrent par la gauche (puisque mon menu est à droite).
Le menu marche nikel sous Opera, Safari, Firefox mais bien sur pas du tout sous IE7 (comme d'hab').

Mais ce qu'il y a d'étrange c'est que le menu marche sous tous les navigateurs avec cette page d'essai là :
http://www.monsite.com/menu.html

Mais ne marche pas avec IE7 (ça fait juste des liens) si je l'intègre à mon site là : Smiley biggol
http://www.monsite.com/index2.php

Bref, il y a sûrement un élément de ma page qui fait buguer le menu sur IE7 mais je ne vois pas.
Voici le code CSS (disponible sur le premier lien) :

/* Style commun à tous les navigateurs */
.menu {font-family: arial, sans-serif; /* WIDTH/HEIGHT:taille du DIV. */
width:180px; 
height:150px; 
position:relative; 
margin:0; 
font-size:14px; 
margin:0 0 50px 0; 
padding-left:14px
}	
.menu ul li a, .menu ul li a:visited {/* Couleur premier menu NON survolé et de la police - WIDTH/HEIGHT:taille des blocs dans le DIV - LINE-HEIGHT: centre verticalement le texte*/
display:block; 
text-decoration:none; 
color:#000; 
width:180px; 
height:20px; 
text-align:center; 
border:none; 
background:#FFF; 
line-height:19px; 
font-size:14px;
}
.menu ul {padding:0; 
margin:0; 
list-style-type: none;
}
.menu ul li {margin-right:1px; 
position:relative;
}
.menu ul li ul {display: none;
}

/* Style spécifique à IE */
.menu ul li:hover a {/* Couleur premier menu survolé */
color:#FFF; background:#000;
} 
.menu ul li:hover ul {
display:block; 
position:absolute; 
top:0; 
right:180px; 
width:178px;
}
.menu ul li:hover ul li a.hide {
background:#dfc184; 
color:#000;
}
.menu ul li:hover ul li:hover a.hide {
width:180px;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {/* Couleur deuxième menu NON survolé */
display:block; 
background:#b3ab79; 
color:#000; 
width:180px;
}		
.menu ul li:hover ul li a:hover {/* Couleur deuxième menu survolé */
background:#dfc184; 
color:#000;
}		
.menu ul li:hover ul li:hover ul {
display:block; 
position:absolute; 
right:198px; 
top:0; 
color:#000;
}
.menu ul li:hover ul li:hover ul li a {/* Couleur troisième menu NON survolé */
display:block; 
width:200px; 
background:#dfc184;
 color:#000;
 }		
.menu ul li:hover ul li:hover ul li a:hover {/* Couleur troisième menu survolé */
background:#bd8d5e; 
color:#fff;
}		

Merci de m'éclairer de vos bougies ! Smiley smile

lofo7
Modifié par lofo7 (15 Jan 2008 - 14:40)