Compatibilité menu ul à plusieurs niveaux avec IE7

**elcoyotos** · 15/07/2014, 16h05

Bonjour,

Quelqu'un aurai une piste pour rendre compatible ce menu avec IE7 ?

Code html :

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

1
2
3
4
5
6
7
8
<!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=utf-8" />
<!--[if lte IE 8]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>

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
body { font:14px/1.5em "Segoe UI", Arial, Helvetica, sans-serif; background: #000 }
a { text-decoration:none }
#menu { margin-top:30px }
nav{padding-top:210px}
#menu ul{margin:0;padding:0;list-style:none;text-align:center;font-size:0;z-index:30}
#menu li{display:inline-block;position:relative;font-size:12px;font-weight:700;border-right:1px solid #fff;text-transform:uppercase;background:#0e88ed;background:url(menu.png) repeat-x 0 0 transparent}
#menu li a{display:block;letter-spacing:normal;color:#fff;height:35px;padding-left:10px;padding-right:10px;line-height:35px;text-decoration:none}
#menu li li{display:block;background:#2ab2df;text-transform:capitalize;border:none}
#menu li li a{padding:1px;height:20px;line-height:20px}
#menu .sous-menu{background:#2ab2df url(puce.png) no-repeat 95% center}
#menu li ul{position:absolute;-webkit-box-shadow:2px 2px 4px #666;-moz-box-shadow:2px 2px 4px #666;-o-box-shadow:2px 2px 4px #666;box-shadow:2px 2px 4px #666;display:none;}
#menu a:hover,#menu li:hover>a{color:#3b81be;background:#fff}
#menu li:hover>ul{left:0;width:230px}
#menu li li:hover>ul{left:230px;top:0;-webkit-box-shadow:2px 2px 4px #666;-moz-box-shadow:2px 2px 4px #666;-o-box-shadow:2px 2px 4px #666;box-shadow:2px 2px 4px #666}
#menu .dernier{border:none}
#menu>ul>li:hover>ul,#menu>ul>li>ul>li:hover>ul{display:block;}
#menu ul .dernier ul{left:auto;right:0;}
#menu ul .dernier ul ul{left:auto;right:230px;top:0;}

Code html :

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
</style>
</head>
<body>
<nav id="menu">
    <ul>              
        <li><a href="#">SUPER LIEN 1</a>
            <ul>
                <li><a href="#">Lien 1</a>
                <ul>
                    <li><a href="#">Sous-menu 1</a></li>
                    <li><a href="#">Sous-menu 2</a></li>
                    <li><a href="#">Sous-menu 3</a></li>
                </ul>
                </li>
                <li><a href="#">Lien 2</a>
                <ul>
                    <li><a href="#">Sous-menu 1</a></li>
                    <li><a href="#">Sous-menu 2</a></li>
                    <li><a href="#">Sous-menu 3</a></li>
                    <li><a href="#">Sous-menu 4</a></li>
                    <li><a href="#">Sous-menu 5</a></li>
                </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">SUPER LIEN 2</a></li>
        <li><a href="#">SUPER LIEN 3</a></li>
        <li><a href="#">SUPER LIEN 4</a></li>
        <li><a href="#">SUPER LIEN 5</a></li>
        <li class="dernier"><a href="#">SUPER Lien6</a>
        <ul>
            <li><a href="#">Lien 1</a>
            <ul>
                <li><a href="#">Sous-menu 1</a></li>
                <li><a href="#">Sous-menu 2</a></li>
                <li><a href="#">Sous-menu 3</a></li>
            </ul>
            </li>
            <li><a href="#">Lien 2</a>
            <ul>
                <li><a href="#">Sous-menu 1</a></li>
                <li><a href="#">Sous-menu 2</a></li>
                <li><a href="#">Sous-menu 3</a></li>
                <li><a href="#">Sous-menu 4</a></li>
                <li><a href="#">Sous-menu 5</a></li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
</nav>
</body>
</html>

Je précise qu'il fonctionne bien à partir d'IE8.
Voici ce que cela donne sous IE7 :

Nom : IE7.GIF
Affichages : 145
Taille : 7,4 Ko

Merci d'avance à ceux qui se pencheront sur mon cas ...

**NoSmoking** · 15/07/2014, 22h11

Bonjour,
ton soucis provient du display:inline-block;, passe tes éléments en float:left. (pas tout regardé néanmoins)

**Bovino** · 16/07/2014, 08h16

Reste aussi à se poser la question : pourquoi IE7 ?

Vouloir une compatibilité IE6 me semble anachronique, mais à la rigueur défendable, mais IE7, je ne vois pas. Cette version n'a jamais réussi à percer et elle est moins utilisée que IE6.
Donc à mon sens, soit on considère qu'on veut être un minimum "moderne" et on demande IE8+, soit on prend en compte les dinosaures et dans ce cas, c'est IE6+.

**elcoyotos** · 16/07/2014, 14h40

Merci de vos réponses

@ NoSmoking

ton soucis provient du display:inline-block;, passe tes éléments en float:left.

Cela ne fonctionne pas. Je dirai même que c'est pire !

@Bovino Pourquou IE7 ?
Parce que je me suis basé sur mes stats et IE7 arrive largement devant IE6 ...

Mais sans doute as tu raison, je devrai, quitte à gérer les dinosaures comme tu dis, me concentrer sur IE6 ...

Une autre piste ?

**NoSmoking** · 16/07/2014, 22h28

Cela ne fonctionne pas. Je dirai même que c'est pire !

je n'ai pas dit qu'il n'y aurait pas d'aménagement à faire, en changeant le comportement dans le flux des LI il y a forcément d'autres choses à ajuster.

IL y aurait bien plusieurs façons de s'en tirer (commentaire conditionnel entre autre...) mais bon quand je vois des lignes de ce style #menu>ul>li:hover>ul,#menu>ul>li>ul>li:hover>ul{display:block;} j'ai un peu de mal à me concentrer

Ce que je te propose, c'est ce 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
#menu {
  margin:0;
  padding:0;
  background:#e1e4f2;
  border: 1px solid #48B;
  line-height:2em;
  height:3em;
  font-size:0.8em;
  text-align:center;
}
/* Barre de menu principale */
#menu a {
  display:block;
  margin:0;
  padding:0.5em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
}
#menu  ul{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  top:3.0em; /* hauteur du bandeau principal */
  line-height:1.5em;
}
#menu li {
  margin:0 2em;
  padding:0em;
  display:inline-block;
  position:relative;
  list-style: none;
  text-align:left;
}
/* modification lien sous menus */
#menu ul li a {
  color:#666;
  font-weight:normal;
}
#menu li:hover > a {
  background:#4D90FE;
  color:#FFF;
}
#menu li:hover > ul{
  display: block;/**/
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF;
  border:solid 1px #48B;
}
/* position et dimension des sous menus */
#menu ul li {
  margin:0;
  width:10em;
}
#menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */
}

la compatibilité avec IE7 se fait avec un commentaire conditionnel

Code html :

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

1
2
3
4
5
6
7
8
<!--[if lte IE 7]>
<style>
#menu li{
  display:inline;
  zoom:1;
}
</style>
<![endif]-->

exemple complet qui devrait répondre à quelque chose prêt à ton besoin.

Code html :

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Menu en CSS</title>
<meta name="Author" content="NoSmoking">
<style>
body {
  font:normal 1.0em/1.5em Verdana, Arial,Helvetica,sans-serif;
  background-color:#e6e6e1;
}
#page{
  margin: 0 auto;
  width:40em;
}
#page h1{
  color:#006699;
  text-shadow:1px 1px 0 #fff;
  vertical-align:middle;
}
#page h1 img{
  vertical-align:middle;
  margin:0 1em 0 0;
}
#menu {
  margin:0;
  padding:0;
  background:#e1e4f2;
  border: 1px solid #48B;
  line-height:2em;
  height:3em;
  font-size:0.8em;
  text-align:center;
}
/* Barre de menu principale */
#menu a {
  display:block;
  margin:0;
  padding:0.5em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
}
#menu  ul{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  top:3.0em; /* hauteur du bandeau principal */
  line-height:1.5em;
}
#menu li {
  margin:0 2em;
  padding:0em;
  display:inline-block;
  position:relative;
  list-style: none;
  text-align:left;
}
/* modification lien sous menus */
#menu ul li a {
  color:#666;
  font-weight:normal;
}
#menu li:hover > a {
  background:#4D90FE;
  color:#FFF;
}
#menu li:hover > ul{
  display: block;/**/
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF;
  border:solid 1px #48B;
}
/* position et dimension des sous menus */
#menu ul li {
  margin:0;
  width:10em;
}
#menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */
}
#menu .last ul{
  left:-100%;
  margin-left:-2px;/* tient compte de la largeur de la bordure */
  width:100%;
}
/* indicateur de présence d'un sous menu */
a.plus:after{
  content: "\25BA";
  float:right;
  color:#ABC;
}
.last a.plus:after{
  content: "\25C0 \0020";
  float:right;
  color:#ABC;
}
</style>
<!--[if lte IE 7]>
<style>
#menu li{
  display:inline;
  zoom:1;
}
</style>
<![endif]-->
</head>
<body>
<div id="page">
  <h1><img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png">Menu en CSS</h1>
 
<ul id="menu">
    <li><a href="#">Menu #1</a>
        <ul>
            <li><a href="#">Menu 1.1</a></li>
            <li><a href="#">Menu 1.2</a></li>
            <li><a href="#">Menu 1.3</a></li>
            <li><a href="#">Menu 1.4</a></li>
        </ul>
    </li>
    <li><a href="#">Menu #2</a>
        <ul>
            <li><a href="#" class="plus">Menu 2.1</a>
                <ul>
                    <li><a href="#">Menu 2.1.1</a></li>
                    <li><a href="#">Menu 2.1.2</a></li>
                    <li><a href="#">Menu 2.1.3</a></li>
                    <li><a href="#">Menu 2.1.4</a></li>
                </ul>
            </li>
            <li><a href="#" class="plus">Menu 2.2</a>
                <ul>
                    <li><a href="#">Menu 2.2.1</a></li>
                    <li><a href="#">Menu 2.2.2</a></li>
                    <li><a href="#">Menu 2.2.3</a></li>
                    <li><a href="#">Menu 2.2.4</a></li>
                </ul>
            </li>
            <li><a href="#" class="plus">Menu 2.3</a>
                <ul>
                    <li><a href="#">Menu 2.3.1</a></li>
                    <li><a href="#">Menu 2.3.2</a></li>
                    <li><a href="#">Menu 2.3.3</a></li>
                    <li><a href="#">Menu 2.3.4</a></li>
                </ul>
            </li>
         </ul>
    </li>
    <li><a href="#">Menu #3</a>
        <ul class="last">
            <li><a href="#">Menu 3.1</a></li>
            <li><a href="#" class="plus">Menu 3.2</a>
                <ul>
                    <li><a href="#">Menu 3.2.1</a></li>
                    <li><a href="#" class="plus">Menu 3.2.2</a>
                        <ul>
                            <li><a href="#">Menu 3.2.2.1</a></li>
                            <li><a href="#" class="plus">Menu 3.2.2.2</a>
                                <ul>
                                    <li><a href="#">Menu 3.2.2.2.1</a></li>
                                    <li><a href="#">Menu 3.2.2.2.2</a></li>
                                    <li><a href="#">Menu 3.2.2.2.3</a></li>
                                    <li><a href="#">Menu 3.2.2.2.4</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Menu 3.2.2.3</a></li>
                            <li><a href="#">Menu 3.2.2.4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 3.2.3</a></li>
                    <li><a href="#">Menu 3.2.4</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 3.3</a></li>
         </ul>
    </li>
</ul>
</div>
</body>
</html>

**elcoyotos** · 17/07/2014, 08h40

Alors là, je n'ai qu'une chose à dire MERCIIIIIIIIIIII !
C'est tip top

Merci d'avoir pris le temps de me répondre et d'avoir résolu mon problème !
Mon niveau en css ne suffisait pas !

Vraiment merci NoSmoking ho grand Gana !!!!

Compatibilité menu ul à plusieurs niveaux avec IE7

CSS

Vue hybride

Discussions similaires

Partager

Partager