Mon tableau décalle tout

#menu ul{
	margin:0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
#menu li{
	float: left;
	margin: auto;
	padding: 0;
	background-color: #6e6d6d;
	position: relative;
}
#menu li a{
	display: block;
	width: 100px;
	color: white;
	text-decoration: none;
	padding: 5px;
}
#menu li a:hover{
	color: #fa0303;
}
#menu ul li ul{
	display: none;
	position: absolute;
}
#menu ul li:hover ul{
	display: block;
}
#menu li:hover ul li{
	float: none;
}
#menu li ul{
	position: static;
}
#menu{
	height: 50px;
}

Voici mon CSS, j'ai un soucis, j'ai fais un menu déroulant mais en passant ma souris dessus cela décale tout ce qui ce trouve en dessous vers la droite..
J'ai regarder partout comment faire et essayer pleins de trucs mais sans réponses.. J'aimerais résoudre le problème.
Merci d'avance ^^
Modifié par Felipe (11 Oct 2019 - 14:24)

<!-- Menu déroulant -->
		<nav id="menu">
		<ul>
<!-- Item 1 -->
			<li><a href="#">Nos serveurs</a>
				<ul>
					<li><a href="#">Garry's Mod</a></li>
					<li><a href="#">Minecraft</a></li>
					<li><a href="#">GTA V</a></li>
				</ul>
			</li>
<!-- Item 2 -->
				<li><a href="#">Jeux PC</a>
					<ul>
						<li><a href="#">Minecraft</a></li>
						<li><a href="#">Garry's Mod</a></li>
					</ul>
				</li>
<!-- Item 3 -->
				<li><a href="Xbox.html">Jeux Xbox</a>
					<ul>
						<li><a href="#">Action/Aventure</a></li>
						<li><a href="#">Combat</a></li>
						<li><a href="#">Compilation</a></li>
						<li><a href="#">Course</a></li>
						<li><a href="#">FPS</a></li>
						<li><a href="#">Gestion/Wargames</a></li>
						<li><a href="#">Jeux de société</a></li>
						<li><a href="#">MMORPG</a></li>
						<li><a href="#">Nouveaux genres</a></li>
						<li><a href="#">Plate-forme</a></li>
						<li><a href="#">RPG</a></li>
						<li><a href="#">Simulation</a></li>
						<li><a href="#">Sport</a></li>
						<li><a href="#"></a></li>
					</ul>
				</li>
<!-- Item 4 -->
				<li><a href="#">Jeux PlayStation</a>
					<ul>
						<li><a href="#">Call of Duty Black Ops II</a></li>
					</ul>
				</li>
<!-- Item 5 -->
				<li><a href="#">Jeux Mobile</a>
					<ul>
						<li><a href="#">Honkai</a></li>
					</ul>
				</li>
<!-- Item 6 -->
				<li><a href="#">Autres</a>
					<ul>
						<li><a href="#">Jeux Switch</a></li>
						<li><a href="#">Jeux en ligne</a></li>
						<li><a href="#"></a></li>
					</ul>
				</li>
		</ul>
		</nav>

Voici mon code HTML si cela peut vous aidez ^^
Modifié par Felipe (11 Oct 2019 - 14:25)

Bonsoir,
J’ai essayé ton code en ajoutant une div de texte en-dessous et je n’ai aucun décalage, l’affichage est propre (à part quelques liens dont le texte déborde du conteneur). À mon avis le problème ne vient pas de cette partie du code.