probleme menu deroulant css avec ie6

**rerebubu** · 14/10/2009, 04h57

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

Code HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**E.Bzz** · 14/10/2009, 10h39

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

A+

**adiGuba** · 14/10/2009, 11h59

Salut,

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 !!!

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<!--[if lte IE 6]>
   ...
<![endif]-->

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Deviendrait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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++

probleme menu deroulant css avec ie6

CSS

Discussions similaires

Partager

Partager