Problème sous-menu sous IE6

**bogsy15** · 16/01/2008, 13h36

Bonjour à tous,

J'ai un problème avec mon menu. En effet les sous-menus ne s'affiche pas sous IE6 alors que sous IE7 et Firefox ca marche niquel.

Voici le 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
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
body 
{
  margin: 0;
  font-family: verdana, arial, sans-serif;
  font-size: 75%;
  background-color:#CCCCCC;
}
 
ul#lemenu li ul
{
  display:none; 
}
 
ul#lemenu li:hover>ul
{
  display:block; 
}
 
ul#lemenu 
{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 11px;
  color:#ffffff;
}
 
ul#lemenu, ul#lemenu ul 
{
  list-style:none;
  padding:0;
  margin-left:0px;
  margin-top:0px;
  margin-bottom:0px;
  width:150px;
  background-color:#cc4f4f;
  color:#ffffff;
}
 
ul#lemenu ul
{
  position:absolute;
  top:-14px;
  left:150px;
}
 
ul#lemenu li
{
  position:relative;
  margin:0px;
  padding:0px;
}
 
ul#lemenu a
{
  display:block;
  width: 150px;
  text-decoration: none;
  text-indent: 10px;
  padding: 5px 0;
}
 
ul#lemenu li:hover, ul#lemenu li a:hover 
{
  color:#000000;
  background-color:#a04f4f;
  background-color:#8dabff;
}
 
ul#lemenu li.sousmenu 
{
  background-image: url(arrow.gif) !important;
  background-position: 135px;
  background-repeat: no-repeat;
  background-color:#cc4f4f; 
}
 
ul#lemenu li.sousmenu:hover, ul#lemenu li.sousmenu>a:hover 
{
  background-image: url(arrowb.gif) !important;
  background-position:135px;
  background-repeat: no-repeat;
  background-color:#8dabff; 
 
}
 
ul#lemenu a 
{
  color:#ffffff;
  text-decoration: none;
}

Voici le 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
<!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>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <ul id="lemenu">
    	<li><a href="">Menu 1</a></li>
    	<li class="sousmenu"><a href="">Menu 2</a>
            <ul>
                <li><a href="">Sous-Menu 1</a></li>
                <li><a href="">Sous-Menu 2</a></li>
            </ul>
    	</li>
    	<li><a href="">Menu 3</a></li>
	</ul>
</body>
</html>

Est-ce que quelqu'un peut m'aider ?
Merci

**Dia_FR** · 16/01/2008, 15h19

IE6 ne gère pas les sélecteurs d'enfants (>)
essaie en les virant

**bogsy15** · 16/01/2008, 17h23

En enlevant les ">" ca ne fonctionne pas. Peut-être que je vais devoir passer par du Javascript ?

**pop_up** · 16/01/2008, 18h45

Code :

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

1
2
3
4
5
 
ul#lemenu li:hover>ul
{
  display:block; 
}

IE (version < 7) ne gère le hover que sur la balise a.

donc le li:hover ne passera pas

**Janitrix** · 16/01/2008, 19h54

En effet, il n'est pas possible de faire des menus déroulant en CSS compatible IE6, il faut généralement du Javascript

Cela dépend du site bien sûr, mais je pense que les menus déroulant ne sont pas une bonne idée, la plupart du temps, la navigation est beaucoup moins aisée, voire catastrophique dans certains cas.

Bon courage

Problème sous-menu sous IE6

CSS

Discussions similaires

Partager

Partager