Discussion :

[boo64]

Bonjour j'ai réalisé un sous menu deroulant qui fonctionne bien mais j'ai un pb de positionnement, je m'explique...enfin j'essaye :
voila ce que j'obtient:

<-------menu------->
<--ssmenu-->

et j'aimeré avoir ceci:

<-------menu------->
___<--ssmenu-->

j'espere avoir été a peu près clair

voici ma aprti css corespondante:

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
#menu .sousMenu
{
 
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menu .sousMenu li
{
 
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 70%;
 
}
#menu .sousMenu a
{
	background-image: none;
 
	display: block;
	border-bottom: 1px solid black;
	padding: 1px 0;
	color:#273b75;
	text-decoration: none;
	font-size:10px;
	background-color: #939dba;
}
#menu .sousMenu li a:visited
{
color:#273b75;
}	
#menu .sousMenu li a:hover
{
	background-color: #273b75;
	color: white;
}
#menu li:hover > .sousMenu { display: block; }

Merci pour votre aide si il faut plus de précision demandé

[MasterOfChakhaL]

Salut,

Je pense que si tu fournissais l'html correspondant, cela nous aiderait grandement à t'aider...

[boo64]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="menu">
	<li><a href="#">Partie 1</a>
		<ul class="sousMenu">
		   <li><a href="#">ss partie1</a></li>
		   <li><a href="#">ss partie2</a></li>
		   <li><a href="#">ss partie3</a></li>
		</ul>
	</li>
	<li><a href="#">Partie 2</a></li>
	<li><a href="#">Partie 3</a></li>
	<li><a href="#">Partie 4</a></li>
</ul>

voila le code html

[MasterOfChakhaL]

re,

je pense qu'un padding-left: nnpx dans ton bloc #menu .sousMenu devrait suffire

[landryx]

je crois qu'en rajoutant un margin-left : n px dans #menu li:hover > .sousMenu ça devrait marcher aussi.

[nikicaillou]

Bonjour,

Le code que tu utilises, est-ce qu'il fait apparaitre ton sous menu ou il est toujours affiché ?

Merci.

[trotters213]

je crois qu'en rajoutant un margin-left : n px dans #menu li:hover > .sousMenu ça devrait marcher aussi.

Ceci ne marchera pas de partout car IE n'aime, malheureusement, pas les >

[landryx]

Ceci ne marchera pas de partout car IE n'aime, malheureusement, pas les >

salut trotters213 ...Merci pour la precision ..

[boo64]

mci pr vos réponses dsl j'étais absent ces dernier jours..

je relance donc le sujet

re,

je pense qu'un padding-left: nnpx dans ton bloc #menu .sousMenu devrait suffire

j'ai testé ca marche pas...

Bonjour,

Le code que tu utilises, est-ce qu'il fait apparaitre ton sous menu ou il est toujours affiché ?

Merci.

ca le fait aparaitre quand tu te met dessus

[boo64]

je crois qu'en rajoutant un margin-left : n px dans #menu li:hover > .sousMenu ça devrait marcher aussi.

merci beaucoup cela marche bien ...

Ceci ne marchera pas de partout car IE n'aime, malheureusement, pas les >

Cela marche sur IE7 et firefox cela me suffit

merci beaucoup pr vos reponses

[nikicaillou]

Peux-tu me donner ton code ou regarder le mien, ça ne fonctionne pas et je ne sais pas pourquoi. Mon menu reste caché.

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
 
#boitemenu {
	position:absolute;
	left:44px;
	top:139px;
      width:186px;
	z-index:2;
      font-size:12px;
	border-color:#333;
	border-style:double;
}
#menu  {
    list-style-type: none;
	margin: 0;
    padding: 0;
    border: 0;
}
 
#menu .sousMenu { 
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
 
#menu li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 99%;
}
 
#menu .sousMenu li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 99%;
}
 
#menu a {
	display: block;
	text-decoration: none;
}
 
#menu .sousMenu a {
	display: block;
	text-decoration: 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 .sousMenu 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; }

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
 
<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>

Merci.