Bonjour,
J'ai un souci de chevauchement entre un menu déroulant et une video.
Sous FF cela fonctionne correctement mais sous Chrome je ne peux accéder au menu déroulant lorsque ce dernier passe sur la video.
Voici le code html du menu :
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 <div class="menu"> <ul> <li><a class="hide" href="listmaj.html">MISE A JOUR</a> <ul> <li><a href="listmaj.html">MAJ A</a></li> <li><a href="listmaja.html">MAJ B</a></li> <li><a href="listmajb.html">MAJ C</a></li> <li><a href="listmajc.html">MAJ D</a></li> <li><a href="listmaje.html">MAJ E</a></li> </ul> </li> <li><a class="hide" href="#">PRESS-BOOK</a> <ul> <li><a href="pba.html">Liste alphabétique</a></li> <li><a href="pbp.html">Liste produits</a></li> </ul> </li> <li><a class="hide" href="#">PLATEFORMES</a> <ul> <li><a href="top20-1.html">A</a></li> <li><a href="top20-3.html">B</a></li> <li><a href="top20-2.html">C</a></li> <li><a href="top20-4.html">D</a></li> <li><a href="top20-6.html">E</a></li> <li><a href="garantie.html">Garanties</a></li> <li><a href="preflad.html">Préfixes cde1</a></li> <li><a href="prefsafa.html">Préfixes cde2</a></li> </ul>
Et celui de la vidéo :
Code:
1
2
3
4 <video id="reprise" width="550" height="310" loop="loop" poster="../../images/reprise.jpg" controls> <source src="doctele/video0520.mp4" type="video/mp4"> <source src="doctele/video0520.ogg" type="video/ogg"> </video>
Et le code css :
Merci pour votre aide.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
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 .menu { font-family: arial, sans-serif; width:879px; height:40px; margin-left:2px; } .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color: #FFFFFF; width:120px; height:30px; text-align:center; border:1px solid #fff; background-color: #FF0000; line-height:30px; font-size:12px; overflow:hidden; } .menu ul { padding:0; margin:0; list-style: none; font-weight:bold; } .menu ul li { float:left; position:relative; } .menu ul li ul { display: none; } /* Menus déroulants specific to non IE browsers */ .menu ul li:hover a { color:#fff; background:#AEAFB2; } .menu ul li:hover ul { display:block; position:absolute; top:30px; left:0; width:105px; } .menu ul li:hover ul li a.hide { background:#AEAFB2; color:#000; } .menu ul li:hover ul li:hover a.hide { background:#AEAFB2; color:#000; } .menu ul li:hover .nexus{ background:url(images/nexusauto.png) no-repeat center; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display:block; background:#FF0000; color:#000; } .menu ul li:hover ul li a:hover { background:#AEAFB2; color:#000; } .menu ul li:hover ul li:hover ul { display:block; position:absolute; left:105px; top:0; } .menu ul li:hover ul li:hover ul.left { left:-105px; } .hide { display:none; }