Discussion :

[ParisElliot]

Bonjour à tous,

Actuellement en train de développer un site, je rencontre un léger souci que je n'arrive pas à corriger...

Je dispose d'un menu déroulant sur un des onglet, mais il s'affiche correctement aléatoirement j'ai l'impression. C'est à dire que lorsque je veux cliquer sur un des liens de ce menu déroulant, celui-ci disparaît.
Voici le site en question pour que vous puissiez voir par vous même : Voir ici

Voici le code de ce 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
<div id="header" class="header-inner">
              <nav class="header-nav">
                <ul id="nav" class="drop">
                  <li><a href="Les-Tournees/" class="a">LES TOURNEES</a></li>
                  <li>|</li>
                  <li><a class="a" href="Spectacles/">NOS SPECTACLES</a></li>
                  <li><a class="fondbleu a" href="">RESERVEZ VOS PLACES</a></li>
                  <li class="menuhover"><a class="a">OFFRES CE ET GROUPES</a>
                    <ul>
                      <li><a href="Goupres/CE/">COMITES D'ENTREPRISES</a></li>
                      <li><a href="Goupres/Scolaires/">SEANCES SCOLAIRES</a></li>
                      <li><a href="Goupres/Centre-loisirs/">CENTRE DE LOISIRS / SOCIAUX</a></li>
                      <li><a href="Goupres/Asso/">ASSOCIATIONS</a></li>
                      <li><a href="Goupres/Carritatif/">CARRITATIF / HUMANITAIRE</a></li>
                      <li><a href="Goupres/Seniors/">SENIORS / EPHAD</a></li>
                      <li><a href="Goupres/Arbres-Noel/">ARBRES DE NÔEL</a></li>
                    </ul>
                  </li>
                  <li>|</li>
                  <li><a class="a" href="Contact/">CONTACT</a></li>
                </ul>
              </nav>
            </div>

Code css :

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
.header-inner > * 
{
  display: table-cell;
  vertical-align: middle;
}
 
.header-inner 
{
  _background-color: rgba(250,250,250,0.8);
  display: table;
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  margin: 0 auto; /* on centre l'élément */
}
 
.header-nav ul,
.header-nav li {
  display: inline;
  list-style: none;
}
 
.header-nav a.a {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  letter-spacing: 0.025em;
  color: inherit;
  text-decoration: none;
  padding: 10px 25px; /* on ventile un peu */
}
 
nav.header-nav
{
  text-align:center;
}
 
ul#nav {
  width:100%;
  margin: 0 auto;
}
 
ul.drop a {
  display: block;
  color: white;
  font-family: Verdana;
  font-size: 14px;
  text-decoration: none;
}
 
ul.drop,
ul.drop li,
ul.drop ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: white;
  text-align: center;
}
 
ul.drop {
  position: relative;
  z-index: 597;
  float: left;
}
 
ul.drop li {
  line-height: 1em;
  vertical-align: middle;
  zoom: 1;
  padding: 5px 10px;
}
 
ul.drop li:hover {
  position: relative;
  z-index: 599;
}
 
ul.drop ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 195px;
}
 
ul.drop ul li {
  float: none;
}
 
ul.drop li ul
{
  _background-color: rgba(250,250,250,0.8);
  width: 100%;
  margin-top: 10px;
}
 
ul.drop li ul li a:hover
{
  text-decoration: underline;
}
 
ul.drop li.menuhover:hover > ul {
  visibility: visible;
}
 
.header-nav a.fondbleu
{
  background-color: #c1056e;
  color: white;
}
 
.nav-is-stuck .main-header {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  animation: stickAnim .3s;
}
 
.nav-is-stuck .main-header .header-inner
{
  background-color: rgba(255,255,255,0.7);
}
 
.nav-is-stuck .main-header .header-inner nav.header-nav ul li ul, header div#header .header-nav ul li ul
{
  background-color: rgba(255,255,255,0.7);
  padding-top: 8px;
  border-radius: 15px;
}
 
header div#header .header-nav ul li ul li a
{
  color: black;
}
 
.nav-is-stuck .main-header .header-inner nav.header-nav ul > li, .nav-is-stuck ul.drop a
{
  color: black;
}

Je précise que la classe "nav-is-stuck" apparaît au scroll lorsque le menu se fixe en haut de la page.

Merci d'avance à tous !

[JefReb]

Lorsque j'exécute ton code je n'ai QUE "RESERVEZ VOS PLACE"
Je n'ai pas du tout ce que tu donnes sur ton site:https://tousaucirque.com/Site2017/
Peux-tu nous donner un code exploitable pour tester.

D'autre part, je ne pense pas que l'utilisation d'une classe .a soit top pour s'y retrouver!
tout comme id="nav" cela prête à confusion et difficile de s'y retrouver facilement.

De toute façon donne nous un code qui s'affiche.

[ParisElliot]

Étonnant, chez moi tout s'affiche, et sur plusieurs ordinateurs...

Voici un pen dans lequel j'ai copié collé ce code.

[NoSmoking]

Bonjour,
visiblement tu as un espace entre ton élément survolé et le sous menu qui apparaît donc le :hover est rompu au passage de l'un à l'autre. Regarde si tu n'as pas un margin qui traine.

[JefReb]

NON, je réitère en disant que le premier code de ton post ne donne rien.
Je viens de reprendre ton code de CE post dans pen et voila ce que ça donne:
https://codepen.io/JefReb/pen/jwgazK

ce qui est très curieux, je reconnais, c'est qu'en prenant le code de ton codepen, dans dreamweaver, je ne vois aucun changement et pourtant on obtient pas la même chose. Je cherche ...

[JefReb]

J'ai trouvé je pense.
Ce n'est pas un problème de margin mais de la position:absolute et du top:100%;

Code css :

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

1
2
3
4
5
6
7
8
9
ul.drop ul {
	visibility: hidden;
	position: absolute;
	/*top: 100%;*/
	top: 1em; /* hauteur line-height de li */
	left: 0;
	z-index: 598;
	width: 195px;
}

Résultat, ça marche: https://codepen.io/JefReb/pen/XgvZZV

[ParisElliot]

Hum, en effet c'est très bizarre ^^

En tout cas merci beaucoup, ça marche parfaitement maintenant !