Discussion :

[karpe]

Bonjour à tous,

Bon voilà ça fait un petit moment que je perds mes cheveux sur le déroulement de mon menu css.
C'est tout bête...mon menu se déroule vers le bas et moi je souhaite qu'il le fasse par le haut... C'est rageant je suis sûre que c'est une histoire de position et de bottom mais rien ne marche...alors si une lumière veut bien faire partager son éclairage ..

Donc une image parlant plus, je suis sur la figure.A et je souhaite dérouler mon menu comme sur la figure.B


le HTML

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
 
<div id="access">
 
<div class="menu">
<ul>
<li class="page_item page-item-36 current_page_item">
<a href="/expertise/">Expertise</a>
<ul class="children">
<li class="page_item page-item-67">
<a href="/expertise/#67">* C’est quoi?</a>
</li>
<li class="page_item page-item-73">
<a href="/expertise/#73">* A quoi ça sert ?</a>
</li>
<li class="page_item page-item-131">
<a href="/expertise/#131">* Notre vision</a>
</li>
<li class="page_item page-item-133">
<a href="/expertise/#133">* Notre méthode</a>
</li>
</ul>
</li>
<li class="page_item page-item-485">
<a href="/prestation/">Prestations</a>
</li>
<li class="page_item page-item-40">
<a href="/boites/">Boîte à outils</a>
<ul class="children">
<li class="page_item page-item-154">
<a href="/boites/#154">* Pourquoi</a>
</li>
<li class="page_item page-item-167">
<a href="/boites/#167">* Outils de conception</a>
</li>
<li class="page_item page-item-184">
<a href="/boites/#184">* Outils de développement</a>
</li>
</ul>
</li>
<li class="page_item page-item-33">
<a href="/equipe/">Equipe</a>
</li>
<li class="page_item page-item-42">
<a href="/moyen/">Moyens</a>
</li>
</ul>
</div>
 
</div>

..et le 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
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
144
145
146
147
148
 
/* =Menu
-------------------------------------------------------------- */
#access {
	display: block;
	float: left;
	width: 740px;
	height:71px;
	font-weight:bold;
	margin-top:0px;
	bottom:0px;
	position: relative; 
}
 
#access .menu-header,
div.menu {
	font-family: impact,sans-serif;
	font-size: 14px;
	width: 740px;
	margin-top:43px;
	bottom:0px;	
	margin-left:20px;
}
 
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
	width:109px;
	display:inline;
 
}
#access .menu-header li,
div.menu li {
	background: #e6e4e5;
	float: left;
	position: relative;
	margin-right :8px;
	-moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
 
}
 
 
#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
 
}
#access li {
	float: left;
	position: relative;
}
#access a {
	color: #434146;
	display: block;
	line-height: 28px;
	width: 109px;
	padding: 0 10px;
	text-decoration: none;
	-moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
	box-shadow: 5px 0px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 5px 0px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow: 5px 0px 0px rgba(0,0,0,0.2);
 
	/*box-shadow: 5px 0px 6px #cacaca;*/
 
}
 
#access a:hover > a {
	color: #434146;
	display: block;
	line-height: 28px;
	width: 109px;
	padding: 10px 10px 10px 10px;
	text-decoration: none;
	-moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
}
 
#access ul ul {
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 3.333em;
	left: 0;
	width: 188px;
	z-index: 99999;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #8e8077;
	color: #444;
	font-size: 13px;
	font-weight: bold;
	height: auto;
	line-height: 1.0em;
	padding: 2px 10px;
	width:109px;
	-moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;	
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #8e8077;
	color: #fff;
	-moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
 
}
/**/
#access li:hover > a,
#access a:focus {
	background: #8e8077; /* Show a solid color for older browsers */
	color: #fff;
	width:109px;
	-moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
	/*border:solid #C33 5px;*/
}
#access ul li:hover > ul {
	display: block;
	height: auto;
	clear:both;
	margin-top:-16px;
	background-color:ff9900;
	width:109px;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-parent > a {
	color: #fff;
	background: #8e8077;
	width:109px;
}

...merci du coup de pouce les z'amis

[Muchos]

Le rendu ne me semble pas très pertinent, sauf pour un menu en pied de page…
Néanmoins, vous pouvez toujours jouer avec le margin-top.

Code css :

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

1
2
3
4
5
6
7
8
 
#access ul li:hover > ul {
    clear: both;
    display: block;
    height: auto;
    margin-top: -110px; /* Dans ce genre-là… */
    width: 109px;
}