Bonjour,
je débute en dev web, et je bloque sur le centrage de mon menu.
je suis arrivé a faire le menu et sous menu comme je le voulais, mais il reste sur la gauche. J'ai essayer de le centrer. Je suis arrivé a le centrer, mais le sous menu et décallé.
j'ai besoin de vos conseils. Merci pour votre aide.
voici les codes:
je débute en dev web, et je bloque sur le centrage de mon menu.
je suis arrivé a faire le menu et sous menu comme je le voulais, mais il reste sur la gauche. J'ai essayer de le centrer. Je suis arrivé a le centrer, mais le sous menu et décallé.
j'ai besoin de vos conseils. Merci pour votre aide.
voici les codes:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Mon Site</title>
<meta charset="UTF-8">
<Link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<div class="bandeauMenu">
<div id="topMenu">
<ul class="niv1">
<li><a href=" ">Home</a></li>
<li><a href=" ">Accueil</a>
<ul class="niv2">
<li><a href=" ">Conseils</a></li>
<li><a href=" ">Produits</a></li>
<li><a href=" ">Activitées</a></li>
</ul>
</li>
<li><a href=" ">Contact</a>
<ul class="niv2">
<li><a href=" ">By Mail</a></li>
<li><a href=" ">By phone</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
div.bandeauMenu {
position:relative;
height:35px;
background-color:#808080;
border-radius: 5px;
}
div#topMenu a {
text-decoration:none;
}
div#topMenu .niv1 a {
color:white;
font-size: 1.2em;
}
div#topMenu .niv2 a {
color:black;
font-size: 1em;
}
div#topMenu ul {
list-style:none;
}
div#topMenu li ul {
display:none;
}
div#topMenu ul.niv1 li:hover ul {
display:block;
position:relative;
right:40px;
margin-top: 9px;
}
div#topMenu ul.niv1 > li {
float:left;
padding-top:5px;
}
div#topMenu ul.niv2 > li {
padding-top:10px;
}
div#topMenu ul.niv1 li {
text-align:center;
width:200px;
height:30px;
border-radius:5px;
}
div#topMenu ul.niv1 > li:hover {
background-color:#595959;
}
div#topMenu ul.niv2 > li:hover {
background-color:#a6a6a6;
}
</html>