Discussion :

[sbobo]

Bonjour tout le monde,

J'ai un grand problème que j'arrive pas à résoudre. J'ai crée un menu déroulant en css que j'ai intégré dans un site. Tout fonctionne très bien sous FF, chrome, opera, IE10. Par contre, sous IE7 8 et 9, c'est une autre histoire. En effet, le sous menu passe en dessous des images.

J'ai suivi le sujet suivant : ICI et j'ai appliqué le z-index:100 sur la div principale, mais le problème persiste toujours.

Sous IE10, FF, Chrome :


Sous IE7 8 et 9 :


Les deux codes de menu et le ccs :

Le menu :

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
 
<div align="center">
<ul class="menugd">
 
    <li><a href="#">LA FONDATION</a></li>
    <li><a href="#">FESTIVAL 2013</a>
 
        <ul>
            <li><a href="#">S'ACCREDITER</a></li>
            <li><a href="#">INSCRIRE UN FILM</a></li>
            <li><a href="#">SECTIONS</a></li>
            <li><a href="#">JURYS</a></li>
            <li><a href="#">PALMARES</a></li>
            <li><a href="#">PROGRAMME</a></li>
            <li><a href="#">CINEMA HOMMAGES</a></li>
            <li><a href="#">LE QUOTIDIEN</a></li>
            <li><a href="#">FOCUS 2013</a></li>
            <li><a href="#">AFFICHE OFFICIELLE</a></li>
        </ul>
 
    </li>
    <li><a href="#">GUIDE DU FESTIVAL</a></li>
    <li><a href="#">ESPACE PRESSE</a></li>
    <li><a href="#">ARCHIVES</a></li>
    <li><a href="#">SERVICES</a>
    	<ul>
        	<li><a href="#">NEWSLETTER</a></li>
			<li><a href="#">YOUTUBE</a></li>
			<li><a href="#">FACEBOOK</a></li>
			<li><a href="https://twitter.com/fifm" target="_blank">TWITTER</a></li>
			<li><a href="#">RSS</a></li>
        </ul>
    </li>
    <li><a href="contactus.asp">CONTACT</a></li>
    <li><a href="#">LIENS UTILS</a>
    	<ul>
        	<li><a href="#">CCM</a></li>
			<li><a href="#">SNRT</a></li>
			<li><a href="#">2M</a></li>
        </ul>
    </li>
</ul>
</div>

Le 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
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
 
@charset "utf-8";
/* CSS Document */
 
.menugd {
z-index:100;
}
 
.menugd,
.menugd ul,
.menugd li,
.menugd a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
.menugd {
    height: 40px;
    width: 840px;
 
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
.menugd li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
 
/*
.menugd ul { display:none; }
*/
 
.menugd li a {
    display: block;
    padding: 0 10px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
 
    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 12px;
 
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
 
.menugd li:first-child a { border-left: none; }
.menugd li:last-child a{ border-right: none; }
 
.menugd li:hover > a { color: #d0a42e; }
 
.menugd ul {
    position: absolute;
    top: 40px;
    left: 0;
 
    opacity: 0;
    background: #1f2024;
 
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
 
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
 
.menugd li:hover > ul { opacity: 1; z-index:10; }
 
.menugd ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
	text-align:left;
 
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
 
.menugd li:hover > ul li {
    height: 30px;
    overflow: visible;
    padding: 0;
}
 
.menugd ul li a {
    width: 150px;
    padding: 4px 0 4px 7px;
    margin: 0;
 
    border: none;
    border-bottom: 0px solid #353539;
}
 
.menugd ul li:last-child a { border: none; }

Voilà, pourriez-vous m'aider ?
Merci

[sbobo]

J'ai trouvé la solution :

Il fallait ajouté le z-index dans cette partie :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.menugd,
.menugd ul,
.menugd li,
.menugd a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    z-index:100;
}

Par contre, la police est un peu bizarre

@+