Menu CSS Vertical deroulant au clic

Fermé
Otixx - 22 août 2009 à 19:02
 Wapaca - 5 juil. 2013 à 04:09
Coucou tout le monde !
J'ai un petit problème au niveau d'un menu vertical en CSS/XHTML que je veux installer sur mon site.
En fait il marche bien mais il se déroule au passage de la souris alors que je souhaiterait que se soit lors du clic.
J'ai déjà essayé avec la fonction :active mais les sous menus disparaissent dés que l'on relâche le clic.

Le menu et sur cette page : http://lesbombers.free.fr/menu/menuHover.html

Voici son code CSS :

#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:0px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(menuvertical/boutton1.gif) no-repeat;}

#menu li.sub {background:#fff url(menuvertical/boutton1.gif) no-repeat;}

#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}

#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}

#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}

#menu :hover {color:#fff; background:#fff url(menuvertical/boutton2.gif) no-repeat; z-index:500; white-space:nowrap;}

#menu :hover > a {color:#fff; background:#fff url(menuvertical/boutton2.gif) no-repeat; z-index:500; white-space:nowrap;}

#menu :hover ul {position:static; height:0px; margin-top:-1px; background:#000;}
#menu :hover ul {position:static; height:0px; margin-top:-1px; background:#000;}
#menu :hover ul :hover ul, 
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #fff;}

#menu :hover ul li, #menu :hover ul li a {background:#000; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #000 url(menuvertical/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover {background:#D74A4A; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#D74A4A url(slide/arrow.gif) no-repeat 120px center; color:#fff;}
#menu :hover ul li.fly:hover > a {background:#D74A4A url(slide/arrow.gif) no-repeat 120px center; color:#fff;}

#menu :hover ul :hover ul li, 
#menu :hover ul :hover ul li a
{background:#000;}
#menu :hover ul :hover ul :hover ul li {background:#000; z-index:500;}

#menu :hover ul :hover ul li.fly a {background: #000 url(menuvertical/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#D74A4A; color:#fff;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#D74A4A url(slide/arrow.gif) no-repeat 120px center; color:#fff;}
#menu :hover ul :hover ul li.fly:hover > a {background:#D74A4A url(slide/arrow.gif) no-repeat 120px center; color:#fff;}

#menu :hover ul :hover ul :hover ul li, 
#menu :hover ul :hover ul :hover ul li a {background:#000;}

#menu :hover ul :hover ul :hover ul :hover {background:#D74A4A; color:#fff;}
#menu :hover ul :hover ul :hover ul :hover a {color:#fff;}

Merci d'avance pour votre aide

18 réponses

Salut,

Tu peux aussi faire un menu cliquable en css sans javascript en utilisant les checkbox et l'opérateur css +.

En gros l'astuce c'est qu'on peut aussi cliquer une checkbox en cliquant sur le label donc tu fous le label, la checkbox auquel tu appliques un display:none, puis au même niveau tu fais une div et tu n'auras qu'à faire :

input:checked + #divdudessous

Puis appliqué les règles css pour permettre l'affichage de cette div.
9