Bonjour,
sur l'un de mes sites je bloque vraiment et j'aimerais sollicité votre aide en CSS SVP.

J'ai un menu déroulant, qui me pose deux problème différent avec smartphone ou PC:

Avec smartphone :
je ne peut pas le survolé avec la sourie pour le déroulé comme sur un PC, du coup je dois cliquer dessus, seulement quand je clique dessus il déroule le menu puis il ouvre la page d'accueil, du coup le menu est a nouveau caché, il faut cliquer dessus plusieurs fois pour que cela cesse de recharger la page d'accueil et que le menu soit accessible, c'est vraiment ennuyant et je pense que sa fait fuir des visiteurs.
Je suis sur que c'est pas grand chose, mais j'ai déjà essayé pleins de technique et de bricolage, j'arrive tout simplement pas.

Avec un PC :
En fait le problème est aussi avec le smartphone mais moins gênant vue que l'écran est plus haut que large.
Je n'arrive pas à mettre de scroolbar, enfin elle n’apparaît pas du coup pour le menu du milieu (Photos) par exemple je suis obligé de réduire le texte à fond pour que l'on puisse voir tout les liens.
J'hésite à mettre plus grand les caractères et espacement dans le menu de gauche puis un simple lien pour les photos et l'onglet contact, une fois la page de photos chargé, affiché un menu en dure dans cette section avec tout les liens, du coup plus besoin de me prendre la tête à essayé de mettre un scroolbar!

Vous en pensez quoi de tout sa?

Merci d'avance pour votre aide.

Voici un lien vers la page principal du site : https://agencementvogler.fr/

Le code CSS du menu :

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
nav{
  width: 100%;
  vertical-align: top;
  position: sticky;
  top: 0px;
  padding:5px;
  text-transform:uppercase;
  background:  linear-gradient(#000000, #555753);
}
 
nav ul{
    list-style-type: none;
    margin-left:0px;
    padding-left:0px;
    padding-top:0px;
    margin-top:0px;
}
 
nav ul li{
    float: left;
    width: 33%;
    text-align: left;
    position: relative;
}
 
nav ul::after{
    content: '';
    display: table;
    clear: both;
}
 
nav a{ display:block;
    text-decoration: none;
  	color:#ffffff;
    border-bottom: 2px solid transparent;
    padding:0px;
    margin:0px;
}
 
nav a:hover{
    color: #BABDB6;
    border-bottom: 2px solid GREY;
}
 
.sousg, .sousm, .sousd{
    display: none;
    box-shadow: 0px 1px 2px #CCC;
    background-color: white;
    color:#000000;
    position: absolute;
    width: 100%;
    padding-left:1%;
    border-radius: 0px 0px 10px 10px;
}
nav > ul li:hover .sousg{
    display: block;
    width: 300%;
    background: linear-gradient(to bottom left, #EEEEEC, white);
}
nav > ul li:hover .sousm{
    display: block;
    width: 200%;
    background: linear-gradient(to bottom, #EEEEEC, white);
}
nav > ul li:hover .sousd{
    display: block;
    width: 100%;
    background: linear-gradient(to bottom right, #EEEEEC, white);
}
.sousg li, .sousm li, .sousd li{
    float: none;
    width: 100%;
    text-align: left;
}
.sousg a, .sousm a, .sousd a{
    padding: 0px;
    border-bottom: none;
    padding-left:1%;
    color:#000000;
}
.sousg a:hover, .sousm a:hover, .sousd a:hover{
    border-bottom: none;
    background-color: RGBa(200,200,200,0.1);
}
Le code html du menu :
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
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
<nav>
			<ul>
					<li class="deroulant"><a href="#">MENU</a>
						<ul class="sousg">
								<li class="navigation"><a title='Accueil du site' href='/' 	class=AMENU>Accueil</a></li>
								<li class="navigation"><a title='Verrières en bois sur mesure' href='/verriere/' 	class='AMENU'>Verrière</a></li>
								<li class="navigation"><a title='Dressing, étagères et placard sur mesure.' 	href='/dressing/' 	class='AMENU'>Dressing & Placard</a></li>
								<li class="navigation"><a title='Cuisines sur mesure' 	href='/creation-de-cuisines-sur-mesure/' 	class='AMENU'>Cuisines sur mesure</a></li>
								<li class="navigation"><a title="Habillage d'escalier en bois massif ou en stratifié" 	href='/habillage-d-escalier/' class='AMENU'>Habillage d'escalier</a></li>
								<li class="navigation"><a title='Garde-corps en bois et verre sur mesure' href='/garde-corps/' class='AMENU'>Garde-corps</a></li>
								<li class="navigation"><a title='Signalétique et mobilier extérieure' 	href='/signaletique-et-mobilier-exterieur/' class='AMENU'>Signalétique extérieure</a></li>
						</ul>
					</li>
				<li class="deroulant"><a href="#">PHOTOS</a>
					<ul class="sousm">
						<li class="navigation">
							<a title="Cliquez-ici pour voir toutes les photos de Agencement Vogler"
							class='HrefAlbumMenu' href='/photos/'>photos de Agencement Vogler</a>
						</li>
						<li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Verrière"
		class='HrefAlbumMenu' href='/photos/album_01verriere-57.html'>Verrière</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de dressing - Armoire murale sur mesure"
		class='HrefAlbumMenu' href='/photos/album_02dressingarmoiremuralesurmesure-25.html'>dressing - Armoire murale sur mesure</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Habillage d escalier"
		class='HrefAlbumMenu' href='/photos/album_03habillagedescalier-37.html'>Habillage d escalier</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Aménagements pédagogiques et environnement"
		class='HrefAlbumMenu' href='/photos/album_04amenagementspedagogiquesetenvironnement-66.html'>Aménagements pédagogiques et environnement</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Panneaux D informations"
		class='HrefAlbumMenu' href='/photos/album_05panneauxdinformations-41.html'>Panneaux D informations</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Clôture en bois"
		class='HrefAlbumMenu' href='/photos/album_06clotureenbois-53.html'>Clôture en bois</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Garde corps"
		class='HrefAlbumMenu' href='/photos/album_07gardecorps-36.html'>Garde corps</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Agencement de commerce, présentation"
		class='HrefAlbumMenu' href='/photos/album_agencementdecommercepresentation-42.html'>Agencement de commerce, présentation</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Aménagement de véhicule"
		class='HrefAlbumMenu' href='/photos/album_amenagementdevehicule-64.html'>Aménagement de véhicule</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Autres verrières"
		class='HrefAlbumMenu' href='/photos/album_autresverrieres-58.html'>Autres verrières</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Étagères"
		class='HrefAlbumMenu' href='/photos/album_etageres-61.html'>Étagères</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de bar-Minibar"
		class='HrefAlbumMenu' href='/photos/album_barminibar-34.html'>bar-Minibar</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Barrières"
		class='HrefAlbumMenu' href='/photos/album_barrieres-54.html'>Barrières</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Chambre à coucher"
		class='HrefAlbumMenu' href='/photos/album_chambrecoucher-59.html'>Chambre à coucher</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Divers travaux"
		class='HrefAlbumMenu' href='/photos/album_diverstravaux-21.html'>Divers travaux</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Meuble SDB"
		class='HrefAlbumMenu' href='/photos/album_meublesdb-60.html'>Meuble SDB</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Plancher sur ossature"
		class='HrefAlbumMenu' href='/photos/album_planchersurossature-62.html'>Plancher sur ossature</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Porte coulissante type verrière"
		class='HrefAlbumMenu' href='/photos/album_portecoulissantetypeverriere-67.html'>Porte coulissante type verrière</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de PORTE DE CAVES"
		class='HrefAlbumMenu' href='/photos/album_portedecaves-72.html'>PORTE DE CAVES</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Portes d'intérieur sur mesure"
		class='HrefAlbumMenu' href='/photos/album_portesdinterieursurmesure-73.html'>Portes d'intérieur sur mesure</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Potager surélevé"
		class='HrefAlbumMenu' href='/photos/album_potagersureleve-70.html'>Potager surélevé</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Rampes d'escaliers"
		class='HrefAlbumMenu' href='/photos/album_rampesdescaliers-68.html'>Rampes d'escaliers</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Rangement sous pente"
		class='HrefAlbumMenu' href='/photos/album_rangementsouspente-63.html'>Rangement sous pente</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Rénovation de cuisine"
		class='HrefAlbumMenu' href='/photos/album_renovationdecuisine-69.html'>Rénovation de cuisine</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Réparation de boiseries"
		class='HrefAlbumMenu' href='/photos/album_reparationdeboiseries-56.html'>Réparation de boiseries</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Terrasse en IPÉ"
		class='HrefAlbumMenu' href='/photos/album_terrasseenipe-44.html'>Terrasse en IPÉ</a>
	</li><li class="navigation">
		<a title="Cliquez-ici pour voir les photos de Transformation et modification"
		class='HrefAlbumMenu' href='/photos/album_transformationetmodification-65.html'>Transformation et modification</a>
	</li>
					</ul>
				</li>
				<li class="deroulant"><a href="/contact/">CONTACT</a>
					<ul class="sousd">
						<li class="navigation"><a title='Demandez votre devis gratuit' 										href='/contact/' 													class=AMENU>Contact & DEVIS GRATUIT</a></li>
					</ul>
				</li>
			</ul>
		</nav>

Merci vraiment pour votre aide.