28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu Centrer

Salut !

Je n'arrive pas à centrer mon menu, pourriez vous m'aidez ? (d'ailleurs si vous savez comment enlevez le petit Menu qu'il y'a en haut à gauche ça pourrait m'aider.

Résultat actuel :
https://prnt.sc/suf98o

CSS :

body{
	font-family: 'Source code pro', Calibri, serif;
	margin: 0px;
	padding: 0px;
}

nav{
	width: 100%;
	background-color: #FF7433;
}

nav > ul{
	margin: 0px;
	padding: 0px;
}

nav > ul::after{
	content: "";
	display: block;
	clear: both;
}

nav > ul > li{
	float: left;
	position: relative;
}

nav > ul > li > a{
	padding: 20px 30px;
	color: #FFF;
}

nav li{
	list-style-type: none;
}

.submenu{
	display: none;
}

nav a{
	display: inline-block;
	text-decoration: none;
}

nav li:hover .submenu{
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0px;
	z-index: 1000;
}

.submenu li{
	border-bottom: 1px solid #CCC;
}

.submenu li a{
	padding: 15px 30px;
	font-size: 13px;
	color: #222538;
	width: 270px;
}
.menu-css:hover{
}
.menu-javascript:hover{
}
.menu-contact:hover{
}

nav a {
  text-decoration: none;
  background: #FFB533;
  border-radius: 15px;
  color: yellow;
  padding: 9px 27px;
}


HTML 

<!DOCTYPE html>
<html>
	<head>
		<title>Sport Impact</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="menu-deroulant-responsive.css">
	</head>
	<body>
		<nav>
			<label for="menu-mobile" class="menu-mobile">Menu</label>
			<input type="checkbox" id="menu-mobile" role="button">
			<ul>
				<li class="menu-html"><a href="#">Basket</a>
					<ul class="submenu">
						<li><a href="#">RB</a></li>
						<li><a href="#">NB</a></li>
					</ul>
				</li>
				<li class="menu-css"><a href="#">Volley</a>
					<ul class="submenu">
						<li><a href="#">RV</a></li>
						<li><a href="#">NV</a></li>
					</ul>
				</li>
				<li class="menu-js"><a href="#">Athlétisme</a>
					<ul class="submenu">
						<li><a href="#">RA</a></li>
						<li><a href="#">NA</a></li>
						<li><a href="#">BA</a></li>
					</ul>
				</li>
				</ul>
			</nav>
	</body>
</html>

<body> </body>


Merci d'avance pour votre aide.
Modifié par JEANLDC (05 Jun 2020 - 16:31)
Modérateur
Et l'eau, 


nav ul{
  display: flex;
  justify-content:center;
}
Meilleure solution
Sujet clos
Aller à