Menu deroulant horizontal sur click

bonjour
je voudrais me faire un menu horizontal sans javascript qui affiche les sous menus dessous toujours de maniere horizontale sur click

j'ai trouve ceci mais qui est sur hover et ne laisse donc pas le sous menu affiche dessous
comment faire, merci

<ul id="menu-deroulant">
	<li><a href="#">Lien menu 1</a>
		<ul>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
		</ul>
	</li><!--
 --><li><a href="#">Lien menu 2</a>
		<ul>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
		</ul>
	</li>
</ul>

#menu-deroulant, #menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#menu-deroulant {
/* on centre le menu dans la page */
    text-align: center;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    display: inline-block;
}
#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}
#menu-deroulant a {
    text-decoration: none;
    display: block;
	color:#000;
}
#menu-deroulant ul {
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    z-index: 1000;
}
#menu-deroulant li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
}

pour avoir le sous menu a l'horizontal j'ote ceci

#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}

Je connais pas une façon d'animer un menu au clic sans javascript, ni jquery. Eventuellement, il existe une technique avec la pseudo-class :target et l'utilisation des <input type="checkbox"> mais je sais pas si c'est possible de l'utiliser pour plusieurs sous-menus, vu que le css sélecteur utilisé est '~' (à essayer peut-être avec plusieurs input et plusieurs classes).

merci allan

en fait je revise ma question alors
mon probleme est que je trouve que les liens du sous menu ne sont pas facilement cliquable (ils ont tendance à nous echapper)
y a til moyen qu'au survol de la souris, ils apparaissent mais pour rester dessous le lien mere et ce jusqu'a ce que la souris survol un autre lien du menu?
s'ils restaient dessous je trouve qu'ils seraient plus facilement clicquables

Je suis pas trop sûr de bien saisir votre problème. Si vous trouvez que vos liens ne sont pas facilement cliquable, vous pouvez leur rajouter un padding (de la marge intérieur) de 10px (par exemple).

Bonjour,

allan00958 a écrit :
Je suis pas trop sûr de bien saisir votre problème. Si vous trouvez que vos liens ne sont pas facilement cliquable, vous pouvez leur rajouter un padding (de la marge intérieur) de 10px (par exemple).

Dans la mesure où le lien tient sur une seule ligne, je préfère y appliquer un line-height. Selon Google, la hauteur de ligne idéale pour un lien est de 48 pixels sur les résolutions les plus faibles. Il est recommandé de ne pas aller en deçà de 38 pixels (toute résolution confondue). En dessous, les mains de bucheron auront du mal à cliquer au bon endroit.

merci allan
je vais tenter le line-height plutôt que le paddind c'est ptete la solution que je cherchais

merci ca semble fonctionner parfaitement
j'avais opte pour le padding et c'est ce qui ne foonctionnait pas
merci