Discussion :

[isa28]

Bonjour à tous!

J'ai un petit problème sur un menu déroulant horizontal. Je me demandais si quelqu'un pouvait m'aider?

Lorsque ma souris passe sur un titre, les sous-titres de cette section apparaît sous le titre, en inline. C'est okay pour le premier titre sauf qu'après, les sous-titres étant alignés sous le titre, fait en sorte que mes options ne commence pas complètement à gauche de la division. Si je fais left: 0px, ça m'amène collé au début de la fenêtre du browser, alors que la div est centrée et ne prend pas tout l'espace...



Le HTML va comme suit :

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
 
<div class="menu">
<ul>
      <li>menu 1
            <ul>
                  <li>sous-menu 1.1</li>
                  <li>sous-menu 1.2</li>
                  <li>sous-menu 1.3</li>
            </ul>
      </li>
      <li>menu 2
            <ul>
                  <li>sous-menu 2.1</li>
                  <li>sous-menu 2.2</li>
                  <li>sous-menu 2.3</li>     
             </ul>
      </li>
      <li>menu 3
             <ul>
                  <li>sous-menu 3.1</li>
                  <li>sous-menu 3.2</li>
                  <li>sous-menu 3.3</li>   
             </ul>   
      </li>
</ul>
</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
 
.menu {
	background: url(images/menubg.gif) repeat-x;
	height: 42px;
}
 
#menu ul{
	margin:0px;
	padding: 0px;
	list-style-type: none;	
}
 
.menu ul li {
	float:left;
}
 
.menu ul li a {
	display: block;
	padding: 4px 10px;	
}
 
.menu ul li:hover ul, .menu ul a:hover ul {
	visibility: visible;
}
 
.menu ul ul {
	position: absolute;
	visibility: hidden;
}

Est-ce que quelqu'un a une idée?

Merci!!
Isabelle

[Erwan31]

Bonsoir,
2 mises en garde: un sous menu horizontal dynamique (qui s'affiche au passag du curseur sur l'item de liste) présente une défaillance ergonomique:
lorsque l'on souhaite atteindre une sous rub. qui se trouve aux extrémités,
le curseur a de forte chance de passer sur la rub. de premier niveau adjacente à la rub. choisie, et donc un autre sous menu s'affichera.

D'autre part le pseudo-classe :hover ne fonctionne que sur les liens dans IE6-. (tu l'a appliqué sur un li ici).

Je te conseil donc d'implémenter le même menu de manière statique ou alors d'implémenter un menu déroulant dynamique avec sous menu vertical

[isa28]

et admettons que j'ai une tête dur et que j'aimerais vraiment voir si ça peut fonctionner, je ferais quoi pour tasser le sous-menu à la gauche complètement de la div?

merci pour ton commentaire, j'enlèverai le hover du li!!

[devyan]

Salut,

Je vois 2 choses :

1/ la seconde déclaration CSS considère menu comme un ID pas une CLASS. (elle est donc ignorée dans le HTML en exemple)

2/ le fait d'ajouter "position:relative" à la déclaration CSS de menu devrait résoudre le problème de positionnement "absolute" que tu veux obtenir.

A+