Discussion :

[yamatoshi]

Bonjour,

Je souhaiterais réaliser un menu horizontal avec un sous menu horizontal aussi mais en CSS de ce format :

Accueil | Actualité | Contact
Sous menu Actu 1 - Sous menu actu 2

En gros lorsque je clic sur Actu, j'ai le sous menu correspondant qui s'affiche. J'ai utlisé des ul li imbriqué. Mais lorsque je passe ma souris sur actu, j'ai pas mon sous menu qui s'affiche

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
 
#menu{
position:absolute;
top:81px;
left:172px;
z-index:1;
}
#menu a:hover{
color:#ffffff;
 
}
 
#menu ul{
margin:0px;
padding:0px;
list-style:none;
}
#menu li{
float:left;
margin:auto;
padding:0px;
}
 
#menu ul li ul li a{
color:red;
display:none;
}
 
#menu ul li ul li a:hover{
color:red;
display:block;
}

En fait j'arrive bien à faire disparaitre mon sous menu par display:none mais j'arrive pas à comprendre comment le rendre visible au survol de la souris sur le lien principal ? C'est là où je comprends pas

Merci

[devyan]

Salut,

Le problème provient du fait de l'impossibilité du cas décrit dans ton CSS.

Je m'explique :
Tu indiques que pour rendre visible ton sous-menu tu dois être en train de survoler son lien. Hors il n'y a pas d'interaction possible si le sous-menu est display:none.

Il faudrait déplacer l'intéraction au niveau de ton menu...

Par exemple : #menu ul li a:hover ul li {...

Il existe de très bons exemples dans la galerie CSS (cf. les liens en haut de cette page)

[Erwan31]

Bonjour,
les sous-menu horizontaux sont à éviter car ils posent un problème ergonomique : le trajet en diagonal du curseur pour atteindre les sous rubriques qui se trouvent aux extrémités peut survoler les rubriques adjacentes (de premier niveau) et afficher ainsi un autre sous menu.
Par conséquent les sous menu horizontaux ne sont ergonomiquement viable qu'en statique.

Par ailleurs si la cible est large et que par conséquent IE6 en fait partie, ce menu ne fonctionnera pas sous ce navigateur puisque la pseudo-class :hover ne s'applique que sur les liens sur IE6.
Dans ce cas tu es obligé de passer par du JS.