Discussion :

[laurent84200]

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

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

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 :

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
.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;
	}

Merci pour votre aide.

[NoSmoking]

Bonjour,
une gestion des éléments audio/vidéo différente entre les moteurs de rendu, essaies de jouer sur la z-index de ton menu.

Code :

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

1
2
3
4
5
6
7
8
.menu {
  z-index: 1000;
  position: relative;
  width: 879px;
  height: 40px;
  margin-left: 2px;
  font-family: arial,sans-serif;
}

[laurent84200]

Bonjour,

Merci pour ton aide.
Cela fonctionne parfaitement.
Désolé pour ma réponse tardive.