Discussion :

[nikicaillou]

Bonjour,

J'essai de faire en sorte que lorsque l'usager passe dessus ou clic sur le choix "Nous écrire" les autres choix du menu apparait mais ça ne fonctionne pas.

Dans mon code 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
 
<div id="boitemenu">
  <ul id="menu">
  <li><a href="/index.php" target="_parent">Accueil</a></li>
    <li>Nous écrire</li>
      <ul id="sousmenu">
	  <li><a href="mailto:inde@nikpik.net">Nous deux</a></li>
	  <li><a href="mailto:pierre@nikpik.net">Pierre</a></li>
	  <li><a href="mailto:anik@nikpik.net">Anik</a></li>
	  <li><a href="mailto:webmestre@nikpik.net">Webmestre</a></li>
	  </ul>
  <li><a href="/admin/index.php" target="_blank">Admin</a></li>
  </ul>
</div>

Dans mon 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
 
#menu {
    list-style-type: none;
	margin: 0;
    padding: 0;
    border: 0;
}
#menu li {
    float: none;
}
#sousmenu {
    list-style-type: none;
    display:none;
	margin: 0;
    padding: 0;
    border: 0;
}
#sousmenu li {
    float: none;
}
#menu li a:hover {
    list-style-type: none;
    background-image:url(/image/dharma_wheel.png);
    background-repeat:no-repeat;
    background-position:1% 50%;
    padding-left:15px;
}
#menu li:hover > .sousMenu { 
    display: block; 
}

Merci.

[landryx]

Code :

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

1
2
 
      <ul id="sousmenu">

Dans mon css

Code :

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

1
2
3
4
 
#menu li:hover > .sousMenu { 
    display: block; 
}

Merci.

salut

Deja dans ton code tu fais id=sousmenu et apres tu fais #menu li:hover > .sousMenu

[nikicaillou]

C'est un code que j'ai récupéré mais je ne comprend pas vraiment la ligne.
#menu li:hover > .sousMenu
De plus ça ne fonctionne pas.

[landryx]

C'est un code que j'ai récupéré mais je ne comprend pas vraiment la ligne.
#menu li:hover > .sousMenu
De plus ça ne fonctionne pas.

je crois que c'est pour faire apparaitre ton sousmenu quand on passe la souris sur le li qui contient le <ul class= "sousmenu" > sachant que plus haut tu as fait :

Code :

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

1
2
3
4
5
6
7
8
9
 
#menu .soumenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}

[MasterOfChakhaL]

#menu li:hover > .sousMenu

cette ligne signifie que les règles qui suivent s'appliquent aux éléments dont la classe est "sousMenu" qui serait le descendant direct d'un élément li sur lequel se trouve la souris et qui serait (le li) un descendant (pas forcément direct) d'un élément dont l'id est "menu"

Simple n'est-ce pas

A savoir pour IE:
Le :hover ne fonctionne que sur les liens (élément a)
L'opérateur de sélection de descendance direct n'est pas reconnu

[nikicaillou]

C'est ce que j'avais compris mais mon but est de le faire fonctionner le tout sur FireFox et Sarafi donc je ne comprends pas pourquoi ça ne fonctionne pas

[MasterOfChakhaL]

Salut,

J'ai regardé un peu mieux ton code,

Et je pense que ladryx t'as déjà donné la solution, ou du moins la localisation du problème.

dans ton ul qui englobe le sous menu tu utilises un identifiant alors que la fameuse ligne #menu li:hover>.sousMenu fait référence à une classe.

deux possibilités:
soit tu écris #menu li:hover>#sousMenu
OU
alors tu écris <ul class="sousMenu">

J'opterais pour la deuxième solution

[nikicaillou]

Mon problème est réglé à moitié. Mon sous menu est toujours affiché, ce que je veux est qu'il s'affiche lorsque l'on passe la souris ou sur un clic et non en tout temps.

Merci.

[MasterOfChakhaL]

Pour le click tu peux oublier avec css. Seul javascript te permettra de faire ca.

Par contre, peut-être que ton sous menu est grand et que tu penses sortir de la zone alors que ce n'est pas le cas.

Essaye de mettre une bordure temporairement afin de voir la place que le sous menu occupe. D'une certaine manière, c'est une facon de débugger ton css

EDIT:
en fait dans ton premier code, tu as cela:

Code :

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

1
2
3
4
5
6
7
#sousmenu {
    list-style-type: none;
    display:none;
	margin: 0;
    padding: 0;
    border: 0;
}

Je ne sais pas ce que tu as choisi (au niveau class/id et ./#) mais il faut apporter la même correction ici. De plus, souviens toi que les identifiants sont sensibles à la casse. Il faut donc écrire sousMenu et non sousmenu (d'après ton html)

[nikicaillou]

J'ai corrigé le tout, voici ce que ça donne mais mon sous menu n'est plus affiché du tout et rien ne se passe lorsque je passe ma souris dessus. De plus même si je met une bordure, je ne la vois pas.

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
 
#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}
#menu li {
    float: none;
}
#menu li a:hover {
    list-style-type: none;
    background-image:url(/image/dharma_wheel.png);
    background-repeat:no-repeat;
    background-position:1% 50%;
    padding-left:15px;
}
.sousmenu {
    list-style-type: none;
    display:none;
	margin: 0;
    padding: 0;
    border: 1;
}
.sousmenu li {
    float: none;
}
 
#menu li:hover > .sousmenu { 
    display: block; 
}

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
 
<div id="boitemenu">
  <ul id="menu">
  <li><a href="/index.php" target="_parent">Accueil</a></li>
  <li><a href="http://photo.nikpik.net" target="_parent">Photos</a></li>
  <li>Itin&eacute;raire</li>
  <li><a href="/notes/notetransport.php" target="_parent">Notes de voyages</a></li>
  <li><a href="/pages/infoinde.php" target="_parent">Informations sur l'Inde</a></li>
  <li><a href="/pages/liensexternes.php" target="_parent">Liens externes</a></li>
  <li><a href="/pages/livredor.php" target="_parent">Livre d'Or </a></li>
  <li>Nous écrire</li>
      <ul class="sousmenu">
	  <li><a href="mailto:inde@nikpik.net">Nous deux</a></li>
	  <li><a href="mailto:pierre@nikpik.net">Pierre</a></li>
	  <li><a href="mailto:anik@nikpik.net">Anik</a></li>
	  <li><a href="mailto:webmestre@nikpik.net">Webmestre</a></li>
	  </ul>
  <li><a href="/admin/index.php" target="_blank">Admin</a></li>
  </ul>
</div>