Dropdown div apparait malgré display: none

Version imprimable

Bonjour,

J'ai un problème que je ne comprend pas. Voici mon code :

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style>
body {
    margin: 50px
}
 
        
        
.div-tableau {
    display: table;
    width:1200px;
    margin: auto;
    table-layout:fixed;
}
 
.div-tableau div {
    display: table-cell;
    vertical-align:middle;
}        
        
 
.nav-mon-compte {
    position: relative;
    display: inline-block;
    z-index: 1;
}
 
.nav-mon-compte-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 220px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
 
.nav-mon-compte-content a {
    padding: 10px 10px;
    display: block;
}
        
.nav-mon-compte:hover .nav-mon-compte-content {
    display: block;
}            
 
.nav-mon-compte-content a:hover {
    background-color: #f5f5f5;
    display: block;
}
 
</style>
 
</head>
 
<body>
 
<div class="div-tableau">
 
    <div class="nav-mon-compte">
 
        <button type="button">Mon compte</button>
        <div class="nav-mon-compte-content">
            <a href="#">Un lien</a>
            <a href="#">Un lien</a>
            <a href="#">Un lien</a> 
            <a href="#">Un lien</a>
            <a href="#">Un lien</a>
            <a href="#">Un lien</a> 
        </div>
 
    </div>
 
</div>    
 
 
</body>
</html>

Il s'agit d'un dropdown qui fonctionne si je ne met pas le div class="div-tableau
Vous allez me dire d'enlever mon div mais je ne peux pas car j'en ai besoin (je vous fourni un code très simplifié)

Donc, ma question est comment faire pour que mon dropdown fonctionne avec le div class="div-tableau ?

Merci d'avance :mouarf:

:salut:

Mauvaise utilisation du table-cell :

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
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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                body {
                                margin: 50px
                }
                .div-tableau {
                                display: table;
                                width:1200px;
                                margin: auto;
                                table-layout:fixed;
                }
                .div-tableau > div {
                                display: table-cell;
                                vertical-align:middle;
                }        
                .nav-mon-compte {
                                position: relative;
                                z-index: 1;
                }
                .nav-mon-compte-content {
                        position: relative;
                        display: none;
                                background-color: #fff;
                                min-width: 220px;
                                overflow: auto;
                                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                                z-index: 1;
                }
                .nav-mon-compte-content a {
                                padding: 10px 10px;
                                display: block;
                }
                .nav-mon-compte:hover .nav-mon-compte-content {
                                display: block;
                }            
                .nav-mon-compte-content a:hover {
                                background-color: #f5f5f5;
                                display: block;
                }
 
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.3.3.js"></script>
  <script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
                        
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        // fin code du test
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
			<div class="div-tableau">
				<div> <!-- table-cell -->
					<div class="nav-mon-compte">
						 <button type="button">Mon compte</button>
						 <div class="nav-mon-compte-content">
								 <a href="#">Un lien</a>
								 <a href="#">Un lien</a>
								 <a href="#">Un lien</a> 
								 <a href="#">Un lien</a>
								 <a href="#">Un lien</a>
								 <a href="#">Un lien</a> 
						 </div>
					</div>
				</div>
				<div> <!-- table-cell -->
					<div class="nav-mon-compte">
						 <button type="button">Mon compte</button>
						 <div class="nav-mon-compte-content">
								 <a href="#">Un lien</a>
								 <a href="#">Un lien</a>
								 <a href="#">Un lien</a> 
								 <a href="#">Un lien</a>
								 <a href="#">Un lien</a>
								 <a href="#">Un lien</a> 
						 </div>
					</div>
				</div>
				<div> <!-- table-cell -->
					<div class="nav-mon-compte">
						 <button type="button">Mon compte</button>
						 <div class="nav-mon-compte-content">
								 <a href="#">Un lien</a>
								 <a href="#">Un lien</a>
								 <a href="#">Un lien</a> 
								 <a href="#">Un lien</a>
								 <a href="#">Un lien</a>
								 <a href="#">Un lien</a> 
						 </div>
					</div>
				</div>
			</div>
 
	</main>
</body>
</html>

02/09/2017, 12h45
elcoyotos

Bonjour,

Est ce que le div :

Code:

<div class="nav-mon-compte">

ne remplit pas la fonction cell ?
j'ai testé sans le

Code:

<div> 

et cela fonctionne
Au quel cas, mon erreur était là :

Code:

.div-tableau > div {

Bravo et MERCI !
02/09/2017, 22h22
danielhagnoul

Oui !

Cette règle CSS .div-tableau > div est différente de la vôtre .div-tableau div car ainsi elle n'affecte que le premier div suivant div-tableau, les autres div ne doivent par être des table-cell !

Si vous supprimer <div>  en gardant .div-tableau > div c'est <div class="nav-mon-compte"> qui devient le table-cell.

J'ai introduit cette division supplémentaire lorsque je testais votre code en essayant de comprendre son fonctionnement anarchique. Une fois le code CSS modifié elle n'est plus nécessaire si le CSS appliqué à la classe "nav-mon-compte" n'entre pas en conflit avec son rôle de table-cell, les tableaux sont souvent "capricieux".

Attention au reste des règles CSS, j'ai dû faire d'autres changements.
03/09/2017, 12h47
elcoyotos

Ok, merci, formidable !
Super explication claire :mouarf: