Défilement vers le haut de balise li (liste)

**DeeVoiD** · 21/10/2009, 10h52

Bonjour,

J'ai fais un menu horizontale, et j'aimerais que lorsque l'on passe sur un bouton, un menu se déroule, mais pas dessous le bouton, au dessus..

pour representé unp eu mieux ce que je veux, c'est presque comme le menu qui se déroule en haut du site, mais a la place que le menu apparaisse dessous, j'aimerais qu'il apparaisse dessus..

J'ai réussi a faire pour qu'il apparraisse dessous, mais dessus je suis bloqué..

Pouvez vous me donné un piste ?

Merci d'avance

**E.Bzz** · 21/10/2009, 12h51

Bonjour,
il faudrait montrer le code de ton menu actuel, pour que quelqu'un puisse t'indiquer les adaptations à faire ...

A+

**Bisûnûrs** · 21/10/2009, 12h57

A priori, au lieu de mettre un top:20px par exemple, suffit de mettre un bottom:20px.

**DeeVoiD** · 21/10/2009, 13h32

le voila :

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
<style type="text/css">
 
		/* the menu */
	ul,li,a {
		display:block;
		margin:0;
		padding:0;
		border:0;
	}
	.men li{
		float:left;
		width:150px;
	}
	ul {
		border:1px solid #9d9da1;
		background:white;
		list-style:none;
	}
 
	li {
		float:none;
		position:relative;
		padding:1px;
		z-index:9;
		list-style-type:none;
	}
		li.folder	{ background:url("images/item_folder.gif") no-repeat; }		
		li.folder ul {
			position:absolute;
			left:130px; /* IE */
			top:-30px;
		}		
			li.folder>ul { left:130px; } /* others */
		li.folder	{ background:url("images/item_folder.gif") no-repeat; }		
 
		li.te ul.men {
			position:absolute;
			left:0px; /* IE */
 
		}
			li.te>ul.men { left:0px; } /* others */
	a.men {
		padding:2px;
		border:1px solid white;
		text-decoration:none;
		color:gray;
		font-weight:bold;
		width:100%; /* IE */
	}
		li>a { width:auto; } /* others */
 
	li a.submenu {
		background:url("images/sub.gif") right no-repeat;
	}
 
	/* regular hovers */
 
	a:hover {
		border-color:gray;
		background-color:#bbb7c7;
		color:black;
	}
		li.folder a:hover {
			background-color:#bbb7c7;
		}
 
	/* hovers with specificity */
 
	li.folder:hover { z-index:10; }		
 
	ul ul, li:hover ul ul {
		display:none;
	}
 
	li:hover ul, li:hover li:hover ul {
		display:block;
	}	
 
	li:hover li:hover ul, li:hover li:hover li:hover ul {
		display:block;
	}	
	li:hover li:hover li:hover ul, li:hover li:hover li:hover li:hover ul {
		display:block;
	}	
	 li:hover li:hover li:hover li:hover ul, li:hover li:hover li:hover li:hover li:hover ul {
		display:block;
	}	
 
 
	</style>

**Bisûnûrs** · 21/10/2009, 15h06

Alors :

1. Le code PHP ne nous sert strictement à rien. Il nous faut le code HTML généré par le code PHP. Je te reporte aux règles de ce forum, je te saurais gré de les suivre.

2. Une solution a été proposée. Le post est donc invisible ? Si non, l'as-tu essayée ? Si non, pourquoi ? Si oui, un problème ? Si oui, lequel ?

**DeeVoiD** · 21/10/2009, 21h45

pardon, je n'avais pas vu ta proposition.. et oui c'est vrai maintenant que je réfléchi un peu, le php ne sert pas a grand chose..

voici mon code css et 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
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
<style type="text/css">
		/* the menu */
	ul,li,a {
		display:block;
		margin:0;
		padding:0;
		border:0;
	}
	.men li{
		float:left;
		width:150px;
	}
	ul {
		border:1px solid #9d9da1;
		background:white;
		list-style:none;
	}
 
	li {
		float:none;
		position:relative;
		padding:1px;
		z-index:9;
		list-style-type:none;
	}
		li.folder	{ background:url("images/item_folder.gif") no-repeat; }		
		li.folder ul {
			position:absolute;
			left:130px; /* IE */
			top:-30px;
		}		
			li.folder>ul { left:130px; } /* others */
		li.folder	{ background:url("images/item_folder.gif") no-repeat; }		
 
		li.te ul.men {
			position:absolute;
			left:0px; /* IE */
			bottom:130px;
		}
			li.te>ul.men { left:0px; } /* others */
	a.men {
		padding:2px;
		border:1px solid white;
		text-decoration:none;
		color:gray;
		font-weight:bold;
		width:100%; /* IE */
	}
		li>a { width:auto; } /* others */
 
	li a.submenu {
		background:url("images/sub.gif") right no-repeat;
	}
 
	/* regular hovers */
 
	a:hover {
		border-color:gray;
		background-color:#bbb7c7;
		color:black;
	}
		li.folder a:hover {
			background-color:#bbb7c7;
		}
 
	/* hovers with specificity */
 
	li.folder:hover { z-index:10; }		
 
	ul ul, li:hover ul ul {
		display:none;
	}
 
	li:hover ul, li:hover li:hover ul {
		display:block;
	}	
 
	li:hover li:hover ul, li:hover li:hover li:hover ul {
		display:block;
	}	
	li:hover li:hover li:hover ul, li:hover li:hover li:hover li:hover ul {
		display:block;
	}	
	 li:hover li:hover li:hover li:hover ul, li:hover li:hover li:hover li:hover li:hover ul {
		display:block;
	}	
 
 
	</style>
    <div style="height:300px; width:100%;"></div>
	<ul class="men" id="menu">
    	<li class="te">
        	<a class="submenu" href="accueil.htm">Domaine</a>
            <ul>
            	<li class="folder">
                	<a class="submenu" href="plan_du_domaine.htm">Plan du domaine</a>
                    <ul>
                    	<li class="folder">
                        	<a class="submenu" href="plan_interactif.htm">Plan interactif</a>
                            <ul>
                            	<li>
                                	<a href="page">Ajouter</a>
                                </li>
							</ul>
                         </li>
                         <li class="folder"><a class="submenu" href="visite_virtuelle.htm">Visite virtuelle</a>
                         	<ul>
                            	<li>
                                	<a href="page">Ajouter</a>
                                </li>
							</ul>
                          </li>
                          <li class="folder">
                          	<a class="submenu" href="page">Plan de la station</a>
                          	<ul>
                          		<li>
                            		<a href="page">Ajouter</a>
                            	</li>
						  	</ul>
                          </li>
                          <li>
                          	<a href="page">Ajouter</a>
                          </li>
					</ul>
                 </li>
                 <li>
                 	<a href="page">Ajouter</a>
                 </li>
			</ul>
        </li>
        <li class="te">
        	<a class="submenu" href="test1.htm">test</a>
            <ul>
            	<li>
            		<a href="page">Ajouter</a>
                </li>
			</ul>
         </li>
         <li>
         	<a href="page">Ajouter</a>
         </li>
	</ul>

j'ai essayer avec bottom:50px, mais ca ne fonctionne pas non plus..

Merci pour ton aide

**Bisûnûrs** · 22/10/2009, 16h25

Ton menu semble fonctionner parce que tu n'as pas de contenu en-dessous.

Si tu rajoutes du contenu en-dessous tu verras que tu as un problème. En effet, il faut mettre le deuxième <ul> en position absolute. Et c'est cet <ul> là dont je te parlais et sur lequel il faut mettre bottom:20px.

**DeeVoiD** · 22/10/2009, 18h17

Merci, merci et merci encore

ca fonctonne super !

Défilement vers le haut de balise li (liste)

CSS

Discussions similaires

Partager

Partager