probleme menu deroulant css avec ie6

probleme menu deroulant css avec ie6 .les sous menus ne s'ouvrentt pas . fonctionne parfaitement avec Mozilla

Code HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="horizontal.css" rel="stylesheet" type="text/css" />
<link type="image/x-icon" rel="Shortcut Icon" href="http://groupe-nery.net/PGE/Menu/GNpuce.ico" />
<title>Groupe-NerY</title>
</head>
 
<body>
		<div id="menu">
   <ul class="niveau1">
      <li><a href="http://www.hotel-lunadelsol.com/index.htm">Accueil</a></li>
      <li><a href="http://www.hotel-lunadelsol.com/hotel.htm">L'H&ocirc;tel</a></li>  
 
      <li class="sousmenu"><a href="">Centre de bien-&ecirc;tre</a>
	     <ul class="niveau2">
            <li class="sousmenu"><a href="http://www.hotel-lunadelsol.com/massage.htm">Massages</a>
 
	       <li><a href="http://www.hotel-lunadelsol.com/onglerie.htm">Onglerie</a></li>
               <li class="sousmenu"><a href="http://www.hotel-lunadelsol.com/epilations.htm">Epilations</a>
 
	          </li>						
		   <li class="sousmenu"><a href="http://www.hotel-lunadelsol.com/tresses.htm">Tresses Afros</a></li>
           		   <li class="sousmenu"><a href="http://www.hotel-lunadelsol.com/reveilaquatique.htm">Reveil Aquatique</a></li>
        </ul>
     </li>
       <li class="sousmenu"><a href="">Excursions</a>
	     <ul class="niveau2">
            <li class="sousmenu"><a href="http://www.hotel-lunadelsol.com/catamarans.htm">Catamaran</a>
 
	       <li><a href="http://www.hotel-lunadelsol.com/paradise.htm">Paradise Island</a></li>
               <li class="sousmenu"><a href="http://www.hotel-lunadelsol.com/oceanword.htm">Ocean World</a>
 
	          </li>						
		   <li class="sousmenu"><a href="http://www.hotel-lunadelsol.com/safarihorse.htm">Safari Horse</a></li>
           		   <li class="sousmenu"><a href="http://www.hotel-lunadelsol.com/camelsafari.htm">Jeep Safari</a></li>
                   		   <li class="sousmenu"><a href="http://www.hotel-lunadelsol.com/puertoplata.htm">Visite Puerto Plata</a></li>
           </ul>
          </li>
 
           <li><a href="http://www.hotel-lunadelsol.com/contact.htm">Contacts</a></li>
      <li><a href="http://www.hotel-lunadelsol.com/reservations.htm">Reservations</a></li>    
            <li><a href="http://www.hotel-lunadelsol.com/vols.htm">Vols</a></li>
      <li><a href="http://www.hotel-lunadelsol.com/partenaires.htm">Partenaires</a></li> 
   </ul>
</div>
</body>
</html>

code CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body {behavior: url(csshover.htc);}
div#menu a {color:#FFFFFF;}
div#menu ul {padding: 0; margin:0px; background: white; text-align:center}
div#menu li {background:#3399FF;}
/* rejout couleur de fond */
div#menu li.sousmenu {background-color:#3399FF}
/*  couleur qund survol avec la souris la menu pricipal */
div#menu li:hover {background: #3333FF;}
div#menu li.sousmenu:hover {background: #3333FF;}
 
/* rajout pr pour fleche direction bas et couleur de fond*/
div#menu li.plop { background-color:#859AD3;}
 
/* une petite bordure en top*/
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid}
 
div#menu ul ul {position: absolute;display:none; width:100px}
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block;width:126px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}

Merci de vore aide

Bonjour,
ça vient du :hover
IE6 ne le reconnait que sur les <A> me semble-t-il ...

A+

Salut,

Citation:

Envoyé par E.Bzz

ça vient du :hover
IE6 ne le reconnait que sur les <A> me semble-t-il ...

+1

Théoriquement le behavior csshover.htc devrait résoudre le problème... mais il en existe plusieurs versions incompatible selon la version de Windows !!! :aie:

Perso je pense que la meilleure solution reste l'utilisation du JavaScript. JQuery fait très bien l'affaire pour cela, par exemple avec quelque chose comme cela :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Ce code sera exécuté une fois la page chargée : $("div#menu li").hover( function() { $(this).addClass("hover");}, function() { $(this).removeClass("hover");} ); }); </script>
Bien sûr il est préférable d'héberger le fichier jquery sur ton serveur, et tu pourrais utiliser les commentaires conditionnel pour limiter cela à IE6 et inférieur :
Code:

1 2 3 4 
:arrow: Ce script simule le hover en ajoutant/supprimant une classe CSS sur l'élément au passage de la souris.

Ensuite, il ne reste plus qu'à doubler les définitions de la feuille de style. Ceci :
Code:

1 2 3 div#menu li:hover { background: #3333FF; }
Deviendrait
Code:

1 2 3 4 div#menu li.hover, /* pour IE6 */ div#menu li:hover { /* pour les autres */ background: #3333FF; }
Dans le code javascript je limite l'évènement "hover" à ton menu (div#menu li), mais tu pourrais le rajouter sur d'autres éléments si besoin...

a++