Bonjour à tous !

Je viens de développer un site web pour l'entreprise dans laquelle je suis en stage (http://www.oncovet-clinical-research.com)

Je rencontre un problème avec mon menu déroulant pour l'afficher sur mobile

Je n'arrive pas à activer le focus sur mes li afin de le rendre opérationnel. J'ai essayé deux méthodes trouvées sur le net, la première avec tabindex et la deuxième avec du jquery mais impossible de faire fonctionner mon menu.

Voici mon code HTML relatif :

Code php : 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<nav/>
<ul id="menu">
<span class="menu_princ">
	<li>
	<a href="http://www.oncovet-clinical-research.com">
		<? $monUrl =$_SERVER['REQUEST_URI'];
 
			if ($monUrl=="http://www.oncovet-clinical-research.com")
				{
		?> 
					<span id="page_actuelle">
		<?
			}
		?>
	HOME
		<?
			if ($monUrl=="http://www.oncovet-clinical-research.com")
				{
		?> 
					</span>
		<?
				}
		?>
	</a>
	</li>
</span>
<li tabindex="1" class="menu">
	<h2>
		<? $monUrl =$_SERVER['REQUEST_URI'];
			if ($monUrl=="/mission/" OR $monUrl=="/management/" OR $monUrl=="/clients-partners/")
				{
		?> 
					<span id="page_actuelle">
		<?
				}
		?>
ABOUT OCR
		<?
			if ($monUrl=="/mission/" OR $monUrl=="/management/" OR $monUrl=="/clients-partners/")
				{
		?> 
					</span>
		<?
				}
		?>
	</h2>
    	<ul>
    		<li class="first"><a href="http://www.oncovet-clinical-research.com/mission/">Mission</a></li>
    		<li class="second"><a href="http://www.oncovet-clinical-research.com/management/ ">Management</a></li>
    		<li class="third"><a href="http://www.oncovet-clinical-research.com/clients-partners/">Clients & Partners</a></li>
    	</ul>
</li>
 
<li tabindex="1" class="menu">
	<h2>
		<? 
			$monUrl =$_SERVER['REQUEST_URI'];
				if ($monUrl=="/clinical-trials/" OR $monUrl=="/biobank/" OR $monUrl=="/preclinical/")
					{
		?> 
						<span id="page_actuelle">
		<?
					}
		?>
 
SERVICES
		<?
			if ($monUrl=="/clinical-trials/" OR $monUrl=="/biobank/" OR $monUrl=="/preclinical/")
				{
		?> 
					</span>
		<?
				}
		?>
	</h2>
 
	<ul>
		<li class="first"><a href="http://www.oncovet-clinical-research.com/clinical-trials/">Clinical Trials</a></li>
    		<li class="first"><a href="http://www.oncovet-clinical-research.com/biobank/">Biobank</a></li>
  		<li class="second"><a href="http://www.oncovet-clinical-research.com/preclinical/">Preclinical</a></li>
   		<li class="third"><a href="http://histo.oncovet-clinical-research.com" target="_blank">Histology Laboratory</a></li>	
    	</ul>
</li>						
<li tabindex="1" class="menu">
	<h2>
		<?
 			$monUrl =$_SERVER['REQUEST_URI'];
				if ($monUrl=="/oncology-2/" OR $monUrl=="/cardiology-2/" OR $monUrl=="/neurology-2/")
					{
		?> 
						<span id="page_actuelle">
		<?
					}
		?>
 
THERAPEUTIC AREA
		<?
			if ($monUrl=="/oncology-2/" OR $monUrl=="/cardiology-2/" OR $monUrl=="/neurology-2/")
				{
		?> 
					</span>
		<?
				}
		?>
	</h2>
    	<ul>
    		<li class="first"><a href="http://www.oncovet-clinical-research.com/oncology-2/">Oncology</a></li>
    		<li class="second"><a href="http://www.oncovet-clinical-research.com/cardiology-2/">Cardiology</a></li>
    		<li class="third"><a href="http://www.oncovet-clinical-research.com/neurology-2/">Neurology</a></li>
    	</ul>
</li>
<span class="menu_princ">
	<li>
		<a href="http://www.oncovet-clinical-research.com/contact-2/">
			CONTACTS
		</a>
	</li>
</span>
	</ul>		
 </nav>

Le CSS pour l'affichage sur PC :

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
#menu ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 40px;
        z-index: 9999;
        background: #444;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
}
 
#menu li:hover > ul
{
        opacity: 0.85;
        visibility: visible;
        margin: 0;
}
 
@media (max-width: 999px) {
#menu li:focus > ul
{
 
        visibility: visible;
 
}
 
#menu li:not(:focus) > ul {
	visibility: hidden;
}
 
 
}
 
#menu ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
        -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
 
#menu ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
 
#menu ul li:last-child {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
}
 
#menu ul a {
		opacity: 1;
        padding: 10px;
        width: 130px;
        _height: 10px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
}
 
#menu ul a:hover {
        background-color: #0186ba;
        background-image: -moz-linear-gradient(#04acec,  #0186ba);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background-image: -webkit-linear-gradient(#04acec, #0186ba);
        background-image: -o-linear-gradient(#04acec, #0186ba);
        background-image: -ms-linear-gradient(#04acec, #0186ba);
        background-image: linear-gradient(#04acec, #0186ba);
}
 
 
#menu ul li:first-child > a {
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
}
 
#menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #444;
}
 
#menu ul ul li:first-child a:after {
        left: -6px;
        top: 50%;
        margin-top: -6px;
        border-left: 0;
        border-bottom: 6px solid transparent;
        border-top: 6px solid transparent;
        border-right: 6px solid #3b3b3b;
}
 
#menu ul li:first-child a:hover:after {
        border-bottom-color: #04acec;
}
 
#menu ul ul li:first-child a:hover:after {
        border-right-color: #0299d3;
        border-bottom-color: transparent;
}
 
#menu ul li:last-child > a {
        -moz-border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        border-radius: 0 0 3px 3px;
}        
 
Et le CSS pour mobile qui ne fonctionne pas :
 
@media (max-width: 999px) {
#menu li:focus > ul
{
 
        visibility: visible;
 
}
 
#menu li:not(:focus) > ul {
	visibility: hidden;
}
Je vous serai éternellement reconnaissant de m'aider car je ne vois pas d'où vient le problème !

Merci d'avance