Discussion :

[Marc31]

BOnjour,

Je suis en train de faire un site en php mais je me pose une question sur l'architecture.

J'ai mis un menu deroulant horizontal en haut de ma page.

Et j'ai découpé mon site : menu haut / Corps / pieds de page.

Mais j'ai un petit soucis, c'est que lorsque je mets mon menu deroulant dans menu haut, les listes déroulantes s'ouvrent mais s'arrête et ne vont pas sur le corps.

Je ne sais pas si je suis très clair. Pour que le menu fonctionne, il faut que je mettes tout dans menu haut (le menu haut et le corps).

Si quelqu'un pouvait m'éclairer, merci et bonne journée

[Invité]

Bonjour,


Sans voir le code... ?


A priori : un overflow:hidden qui traine.

[Marc31]

Oui désolé, voici le code

Voici la partie html:

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
<ul id="menu-demo2">
  <li>
    <a href="#">bouton 1</a>
  </li>
  <li>
    <a href="#">bouton 2</a>
  </li>
  <li>
    <a href="#">bouton 3</a>
    <ul>
      <li>
        <a href="#">bouton 3 bis</a>
      </li>
      <li>
        <a href="#">bouton 3 bis</a>
      </li>
      <li>
        <a href="#">bouton 3 bis</a>
      </li>
    </ul>
  </li>
</ul>

la partie 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
#menu-demo2, #menu-demo2 ul{
padding: 0;
margin: 0;
list-style:none;
text-align:center;
font-size: 22px; /* ---22 px taille police menu texte - voir 1.35em--- */
 
}
 
#menu-demo2 li{
display: inline-block; /* --- positionne les boutons de façon horizontal--- */
position:relative;
border-radius:4px 4px 0 0;
 
}
 
#menu-demo2 ul li{
display:inherit;
border-radius:0;
 
 
}
#menu-demo2 ul li:hover{
border-radius:0;
 
 
 
}
#menu-demo2 ul li:last-child{
/*border-radius:0 0 8px 8px;*/ /* --- permet de rendre le menu carré--- */
 
 
}
#menu-demo2 ul{
position:absolute;
margin: 37px 0 0 0px; /* --- permet de decaler le sous menu--- */
z-index: 1000;
max-height: 0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #FFFFFF;
/*background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);*/
/*background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);*/
}
#menu-demo2 li:nth-child(2){
background-color: #FFFFFF;
/*background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);*/
/*background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);*/
}
#menu-demo2 li:nth-child(3){
background-color: #FFFFFF;
/*background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);*/
/*background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);*/
}
#menu-demo2 li:last-child{
background-color: #FFFFFF;
/*background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);*/
/*background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);*/
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(2) li{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(3) li{
background:#FFFFFF;
}
#menu-demo2 li:last-child li{
background:#FFFFFF;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#FFFFFF;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#FFFFFF;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 16px; /* taille du contenant 32*/
color:#383836;  /* couleur police texte */
font-family:arial;
}
#menu-demo2 ul a{
padding: 8px 0; /* longueur du menu defilant */
 
}
#menu-demo2 li:hover li a{
color:#383836; /* couleur police texte */
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#383836; /* change la couleur de la police texte au survol de la souris */
}

[ABCIWEB]

J'ai pas regardé dans le détail, mais as-tu compris la remarque de jreaux62 ? Cela donne quoi si tu supprime ce "overflow:hidden qui traine" ?

[Invité]

Code :

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

1
2
3
4
5
#menu-demo2 ul{
...
overflow:hidden;
...
}

Il y en a certainement d'autres dans le reste de ton code (que tu n'as pas montré).

Comme son nom l'indique (ou pas ?) overflow:hidden; va masquer "ce qui dépasse".

[Marc31]

Merci, oui il y avait un overflow de trop....vous êtes trop fort, BRAVO!!!!