Bonjour,

j'ai fais un site pour mon club et sur la page index j'ai mis un lien vers une version du site pour web mobile (pour smartphone et tablette). J'ai fais un code css en remplacant le hoover du menu par click mais le résultat n'est pas celui que je veux. Je voudrais cliquer sur un lien qui m'ouvre un menu déroulant mais qui reste à l'affichage .
Pour info le site web est à l'adresse suivante : http://aikidochauray.chez.com/

mon code html pour l'index version mobile est :
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
21
22
23
<body>
	<header>
	<nav class="menu">
		<ul id="menu-deroulant">
		<li><a id="lien" href="indexT.htm">Menu</a>
			<ul>
			<li><a id="lien" href="indexT.htm">Accueil</a></li>
			<li><a id="lien" href="page1T.htm"> Le mot du Président</a></li>
			<li><a id="lien" href="page2T.htm"> L’aïkido</a></li>
			<li><a id="lien" href="page3T.htm"> Le club</a></li>
			<li><a id="lien" href="page4T.htm"> Notre fonctionnement</a></li>
			<li><a id="lien" href="page5T.htm"> Galerie photos</a></li>
			<li><a id="lien" href="page6T.htm"> Liens</a></li>
			<li><a id="lien" href="mailto:aikido.chauray@gmail.com?subject=Information%20Aïkido" target=principal class="vertical">Contact</a></li>
			<li><a id="lien" href="page7T.htm"> Calendrier</a></li>
			<li><a id="lien" href="page8T.htm"> Documents</a></li>
			<li><a id="lien" href="tarifT.htm"> Tarifs</a></li>
			</ul>
		</li>
		</ul>
	</nav>
 
	</header>
Et le code css qui gère le menu est :

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
#menu {/*Fixe le menu de gauche*/ 
	padding: 0px;
	margin-top: 100px;
	position:fixed;
	overflow: hidden ;
}
 
#lien {/*Format des liens*/ 
	text-decoration:none;
	line-height:200%;
	font-family: Comic Sans MS,Candara,Verdana;
	font-size: 13.0pt;
	color: #FFFFFF;
	text-shadow: 0px 1px 0px black;
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
	padding-top: 4px; 
	padding-bottom: 4px; 
	padding-right:10px;
	padding-left: 10px; 
	text-align:center;
	background:#555; 
	background: linear-gradient( #777, #2C2C2C);
	border-radius: 8px;
	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
}
 
#menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
	position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    z-index: 1000;
	width: 100px; /* seule ligne rajoutée */
}
#menu-deroulant :click{ left: auto;float:none /*color: #A9A9A9; background: #666; background: linear-gradient( #999, #333);*/ }
/*#menu-deroulant :active{ color: #000; background: #777; background: linear-gradient( #777, #2C2C2C); box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}*/
 
ul{list-style-type:none}/*Format des listes*/ 
 
 
#menu-deroulant {
/* on centre le menu dans la page */
    text-align: center;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    float:left;
	border-left:1px solid black;
	display: inline-block;
}
 #menu-deroulant ul li {
 /*on enlève ce comportement pour les liens du sous menu*/ 
    display: inherit;
	float:left;
	position: relative
}
#menu-deroulant a {
	text-decoration:none;
	display: block;
	float:left; 
	width:100px;
	line-height:180%;
	font-family: Comic Sans MS,Candara,Verdana;
	font-size: 13.0pt;
	color: #FFFFFF;
	text-shadow: 0px 1px 0px black;
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
	padding-top: 4px; 
	padding-bottom: 4px; 
	padding-right:10px;
	padding-left: 10px; 
	text-align:center;
	background:#555; 
	background: linear-gradient( #777, #2C2C2C);
	border-radius: 8px;
	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
}
 
 
#menu-deroulant li:active ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
	color: #A9A9A9; background: #666; background: linear-gradient( #999, #333);
}
Comme vous pouvez voir je débute et tripatouille ...