[Resolu] Menu déroulant sous IE6

Bonjour à tous !

Voilà j'ai un petit (gros !) problème pour mon menu déroulant sous IE6. Lorsqu'il se déroule, il décale mes div inférieures.... Et aussi le ul du niveau 0 prend la taille du niveau 1, ce que je ne veux pas.

J'espère que quelqu'un pourra m'aider !

Voici les screenshots :
FF, IE7, Opera :


IE6:


Voici le code :

<div id="global">
	
	<!-- Header -->
	<h1>
		<a title="Retour à l'accueil" href="index.php"><spanTitre</span></a>
	</h1>
	
	<!-- Menu -->
	<div id="menu">
		<ul class="list horizontal navigation">
			<li class="accueil">
				<a class="menuLink" href="#">Accueil</a>
				<ul class="sousMenu">
					<li><a href="#">Sub Item 1.1</a></li>
					<li><a href="#">Sub Item 1.2</a></li>
					<li><a href="#">Sub Item 1.3</a></li>
					<li><a href="#">Sub Item 1.4</a></li>
				</ul>
			</li>
			<li class="news">
				<a class="menuLink" href="#">News</a>
				<ul class="sousMenu">
					<li><a href="#">Sub Item 1.1</a></li>
					<li><a href="#">Sub Item 1.2</a></li>
					<li><a href="#">Sub Item 1.3</a></li>
					<li><a href="#">Sub Item 1.4</a></li>
				</ul>
			</li>
			(...)
		</ul>
		
		<div id="searchMenu">
			(... Formulaire de recherche ...)
		</div>
		<span class="clear"></span>
	</div>
	
	<!-- Main -->
	<div id="container">
		<div id="main" class="video">
                       (... Contenu ...)

	

Et le CSS :

	ul.horizontal li {
		float: left;
	}
	
	#menu ul.horizontal li {
		width: 93px;
		margin: 0 4px 0 0;
		text-align: center;
		padding: 2px 0 1px 0;
	}

	
	/* Sous-menu */
	#menu ul.sousMenu{
		list-style-type: none;
		margin: 3px 0 0 -2px;
		padding: 0;
		border: 0;
		display: none;
		position:absolute;
	}
	
		#menu ul.sousMenu li{
			float: none;
			margin: 0;
			padding: 0;
			border: 2px solid #000;
			width: 125px;
			position:relative;
			z-index: 100;
		}

			#menu li a:link, 
			#menu li a:visited{
				display: block;
			}

Merci pour votre aide !
Modifié par Zulie494 (16 Feb 2010 - 14:52)

Hello et bienvenue,

en l'état ton code n'est pas suffisant pour tester le problème. Il manque soit les déclarations css :hover, soit le JavaScript associé.

Oups, voilà le code manquant :

#menu li:hover ul {
display:block;
}

Je n'utilise pas de javascript.

Merci pour le temps que vous accorderez à mon problème !

Zulie494 a écrit :
Je n'utilise pas de javascript.

Ben pour IE6 tu es bien obligée puisqu'il ne reconnaît le :hover que sur les liens.

Oui je sais, mais bon pour le moment le :hover est sur des liens, donc c'est bon.
Après ces bugs résolus, j'ajouterais je fichier css3hover.htc

Zulie494 a écrit :
Oui je sais, mais bon pour le moment le :hover est sur des liens

Et donc ton code actuel c'est quoi ?

J'ai tout posté au dessus, non ?!?
J'ai oublié quelque chose ?

Je suis désolée pour cette perte de temps...

Ben c'est peut-être moi qui ne suis pas clair.

Tu dis que le problème se pose avec IE6 mais en l'état je ne peux pas le tester sur IE6 (li:hover au lieu de a:hover). Or en faisant le display:block en JavaScript je ne vois pas le soucis dans IE6 donc j'aimerais voir quel code tu utilises avec IE6.

Effectivement, j'ai du mal !

voilà, je pense que cette fois c'est le bon code

#menu li a:hover {
	display: block;
}

Merci de ta patience
Modifié par Zulie494 (15 Feb 2010 - 16:28)

Zulie494 a écrit :
voilà, je pense que cette fois c'est le bon code

Hem... et moi je pense que non !

Ce ne sont pas les liens qui sont en display:none mais les UL.

Je t'invite à prendre le temps de réunir le code html et css nécessaires (et suffisants) pour reproduire ton souci avec IE6.

Bah en fait, je ne comprends pas trop que les li:hover fonctionne sur mon IE6 (J'utilise IETester...)

J'ai trouvé ça dans mes dossiers :

http://code.google.com/p/ie7-js/source/browse/trunk/lib/IE8.js?r=28

C'est peut-être ça... pour les hovers

Zulie494 a écrit :
C'est peut-être ça... pour les hovers

Tout juste. Par contre en l'état cela passe bien au dessus du reste donc il faudrait voir le reste de tes déclarations css.

Peut-être que ça irait plus vite en regardant du côté de Superfish ou d'un équivalent.

J'ai réglé le problème, c'est tout bon !
Merci de ton aide !

J'ai ajouté un position:absolute sur le ul parent

Impec !

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre.

En fait j'aurais un nouveau petit problème. Elle concerne la taille des li sur IE6.
Comme vous pouvez le voir sur les photos, lors du survol des li dans IE6, ceux-ci prenne la taille du ul du dessous. Et j'aimerais que la taille reste fixe comme sur le screenshot de FF.

       #menu ul.navigation li {
		width: 93px;
		margin: 0 4px 0 0;
		text-align: center;
		padding: 2px 0 1px 0;
		
	}

	/* Sous-menu */
	       #menu ul.sousMenu li{
			float: none;
			margin: 0;
			padding: 0;
			border: 2px solid #000;
			width: 125px;
			position:relative;
			z-index: 900;
		}

Quelqu'un a une idée ?
Merci pour votre temps et votre aide

Hem... pour gagner du temps cette fois-ci pourrais-tu nous donner les codes html et css complets pour reproduire la chose (l'idéal serait d'ailleurs un lien vers une page en ligne) ?

Voilà une petite page test :

page HTMl

Style CSS

Javascript Hover sur les li
Modifié par Zulie494 (16 Feb 2010 - 14:51)

Problème résolu en reprenant du début, alors je ne peux même pas vous dire ce que j'ai changé au final, tellement j'en ai changé depuis 2 jours !

Merci pour le temps que vous avez pris et pour votre aide.