Sujet Précédent Sujet Suivant

Menu déroulant et Internet Explorer

Résolu/Fermé
Yaninho Messages postés 484 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 30 août 2010 - 26 mars 2009 à 14:46
Yaninho Messages postés 484 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 30 août 2010 - 30 mars 2009 à 10:56
Bonjour,

J'en appelle à votre aide car (une fois n'est pas coutume), IE me pose de gros soucis (que ce soit IE7 ou IE8) au niveau de mon menu déroulant (en CSS pas de JavaScript).

Je m'explique, lorsque je veux aller au deuxième niveau de mon menu, je perds le focus, et le menu disparaît...

Voici le code HTML correspondant au menu : 

<div id="menu"> 
<ul class="niveau1"> 
	<li><a href="ces.html" class="liensinternes2009"><strong>CES</strong>, Cotentin Energies System</a></li> 
	<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
	<li class="sousmenu"><a href="construire_renover.html" class="liensinternes2009">Construire / r&eacute;nover</a>
		<ul class="niveau2">
			<li><a href="#" class="liensinternes2009">Test1</a></li>
			<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
			<li><a href="#" class="liensinternes2009">Test2 qui nous permet de tester le menu même avec un texte long!!!!!!!!!!!!!!!!!!!!!!!!!</a></li> 
		</ul>
		</li>
		<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
		<li><a href="changer_energie.html" class="liensinternes2009">Changer d'&eacute;nergie</a></li> 
		<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
		<li class="sousmenu"><a href="informations_complementaires.html" class="liensinternes2009">Informations compl&eacute;mentaires</a> 
			<ul class="niveau2"> 
				<li><a href="#" class="liensinternes2009">Test3</a></li>
				<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
				<li><a href="#" class="liensinternes2009">Test4</a></li> 
			</ul> 
			</li> 
			<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
			<li><a href="projets_tertiaires.html" class="liensinternes2009">Projets tertiaires</a></li>
			<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
			<li><a href="faq.html" class="liensinternes2009">Foire aux questions</a></li>
			<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
			<li><a href="partenaires.html" class="liensinternes2009">Partenaires</a></li>
			<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
		</ul> 
	</div>


Et les CSS... 

div#menu{
	text-align:left;}

div#menu ul li { 
    position:relative; 
    list-style: none;
	border-bottom:1px solid #727A7F;} 

div#menu ul ul { 
    position: relative; 
    top: 0; 
    left: 100px;}   

div#menu li a { 
    text-decoration: none}

div#menu ul ul, div#menu ul li ul{ 
    position: absolute; 
    top: 0; 
    margin-left: 130px; 
    display:none;} 

div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3{ 
    display:block; }

div#menu a { 
    color:#000000 } 
	
div#menu li a { 
    text-decoration: none; 
    padding: 4px 0 4px 8px; 
    display:block; 
	border-left: 8px solid #BBB;
	width:auto; } 

div#menu li a:hover { 
    border-left-color: red; }
 
div#menu ul ul li a:hover { 
    border-left-color: #00FF00;} 

div#menu ul ul ul li a:hover { 
    border-left-color: #0000FF; }

div#menu ul ul li{
	border-top:1px solid #727A7F;
	border-right:1px solid #727A7F;
	border-bottom:1px solid #727A7F;
	border-left:1px solid #727A7F;
	padding-right:10px;}
A voir également:

5 réponses

Réponse 1 / 5
Yaninho Messages postés 484 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 30 août 2010 63
30 mars 2009 à 10:56
Bon j'ai fini par réussir en bidouillant...

En effet j'ai fait des bordures transparentes pour ne pas perdre le focus avec un hack sur IE.

A+
1
Réponse 2 / 5
Yaninho Messages postés 484 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 30 août 2010 63
26 mars 2009 à 15:55
J'ai résolu le problème du focus (pour ceux que ca intérésse, il faut mettre un fond sur les sous-menu pour que IE ne croit pas que la souris est sortie du menu.

Donc sur IE8 c'est parfait, cela dit, sur IE7, j'ai de nombreux décalages et je ne vois pas d'ou cela vient, pouvez vous m'aider ?

Pour ce qui est du code j'ai juste rajouté un ligne : 

div#menu ul ul li{
	border-top:1px solid #727A7F;
	border-right:1px solid #727A7F;
	border-bottom:1px solid #727A7F;
	border-left:1px solid #727A7F;
	padding-right:10px;
	background: url(../images/menu.png);
}
0
Réponse 3 / 5
Yaninho Messages postés 484 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 30 août 2010 63
26 mars 2009 à 16:26
Voici le résultat avec Chrome :

http://www.monsterup.com/image.php?url=upload/1238081117989.png

Voici le résultat avec IE7 :

http://www.monsterup.com/image.php?url=upload/1238081117395.png
0
Réponse 4 / 5
Yaninho Messages postés 484 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 30 août 2010 63
27 mars 2009 à 09:41
Up, Personne ne peux m'aider ? J'ai décalé les sous-menu vers la droite avec un hack, mais il me reste le problème du focus sur IE7, le fond ne fonctionne pas.....

Merci,
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Yaninho Messages postés 484 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 30 août 2010 63
30 mars 2009 à 09:59
Up,

Je n'arrive toujours pas accéder (enfin si je vais vite avec la souris ça marche) a mes sous-menus sous IE7... Je perds le focus à l'entrée dans le UL des sous-menus alors que sur IE8 et FF et les autres ça marche niquel! Avez vous une idée ?

Merci
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses