Discussion :

[Askle]

Bon tout d'abord, je suis nouveau ici, donc bonjour a tous.

Ensuite voila mon problème, cela concerne un menu dynamique:

Le xhtml:

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
<ul id="menu">
	<li onmouseover="displaySMenu('smenu2')" onmouseout="hideSMenu()">Images<ul id="smenu2" class="smenu">
		<li>...</li>
		<li onmouseover="displaySMenu('lsmenu2_1')" onmouseout="hideLSMenu()">...<ul id="lsmenu2_1" class="lsmenu">
			<li>...</li>
			<li>...</li>
			<li>...</li></ul>
		</li></ul></li>
	<li onmouseover="displaySMenu('smenu1')" onmouseout="hideSMenu()">Paroles<ul id="smenu1" class="smenu">
		<li>...</li>
		<li onmouseover="displaySMenu('lsmenu1_1')" onmouseout="hideLSMenu()">...<ul id="lsmenu1_1" class="lsmenu">
			<li>...</li>
			<li>...</li></ul>
		</li></ul></li>
</ul>

Le javascript:

Code javascript :

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
function displaySMenu(id) {
	d = document.getElementById(id);
	if(d){
		d.style.display="block";
		d.style.left=getOffsetLeft(d.parentNode)-190+"px";
	}
}
 
function hideSMenu() {
	for(i=0; i<10; i++)
		if(document.getElementById("smenu"+i))
			document.getElementById("smenu"+i).style.display="none";
}
 
function hideLSMenu() {
	for(i=0; i<10; i++)
		for(j=0; j<10; j++)
			if(document.getElementById("lsmenu"+i+"_"+j))
				document.getElementById("lsmenu"+i+"_"+j).style.display="none";
}

Le css:

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
#menu {
	position: absolute;
	margin: 0px; padding: 0px;
	width: 1px; height: 1px;
	z-index: 100;
}
 
#menu li {
	display: inline;
	padding-right: 10px;
}
 
#menu li:hover {
	text-decoration: underline;
}
 
.smenu {
	position: absolute;
	margin: 0px; padding: 0px;
	display: none;
}
 
.smenu li {
	display: inline;
	padding-right: 10px;
}
 
.lsmenu {
	margin: 0px; padding: 0px;
	display: none;
}
 
.lsmenu li {
	display: list-item;
	list-style-type: none;
	margin: 0px; padding: 0px;
}

Le problème, la classe lsmenu li prend l'atribut de l'objet menu li display=inline alors qu'elle est bien redéfini display=list-item.

Ma question, pourquoi, et comment arranger cela?

[Askle]

Bon, j'ai contourner mon problème en passant mon objet #menu en class .menu (mais je n'ai toujours pas d'explication)

[Askle]

2nd problème: la fonction suivant qui rend visible le sous menu permet egalement de positionner celui-ci sous le lien qui la rendu visible.

Code javascript :

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

1
2
3
4
5
6
7
function displaySMenu(id) {
	d = document.getElementById(id);
	if(d){
		d.style.display="block";
		d.style.left=getOffsetLeft(d.parentNode)-190+"px";
	}
}

Problème ca marche pas tout le temps