how can I center a dropdown menu? - html

Question

I have been working on a site and am wondering how I can center this dropdown,
My code as a code pen is codepen
here is the css
I have tried many things including changing the position tag to different values and adding in padding and other gaps
<nav class="navbar">
<div class="logo">
<a href=index.html>
<img src="Addy Schroeders.png" width="60px" height="60px">
</a>
</div>
<div class="menu">
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/">
About
</a>
</li>
<li>
<a href="/">
help and resources
</a>
</li>
<li class="services">
<a href="/">
pages
</a>
<!-- DROPDOWN MENU -->
<ul class="dropdown">
<li>
<a href="template.html">
Dropdown 1
</a>
</li>
<li>
<a href="/">
Dropdown 2
</a>
</li>
<li>
<a href="/">
Dropdown 2
</a>
</li>
<li>
<a href="/">
Dropdown 3
</a>
</li>
<li>
<a href="/">
Dropdown 4
</a>
</li>
</ul>
<li>
<a href="/">
Contact
</a>
</li>
</div>
</ul>
</nav>
body {
font-family: opendyslexic, sans-serif;
text-align: center;
font-size: 24px;
line-height: 1.2;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #f7abff /* pink */;
}
li {
list-style: none;
}
.navbar {
display: flex; /* stops the logo being on top of everything else */
align-items: center; /* centres them vertically */
justify-content: space-between; /* puts navbar at right */
padding: 20px; /* adds space at the top */
background-color: rgb(85, 96, 255)/* blue */; /* the background color */
}
.services {
position: relative;
float: right;
}
.dropdown {
background-color: #5560ff/* pink */; /* this makes the dropdown menu colored */
padding: 1em 0;
position: absolute;
display: none;
border-radius: 8px;
top: 30px;
padding-right: 20px;
padding-left: 20px;
}
.services:hover .dropdown {
display: block;
}
.image{
border-radius: 50%;
}
body {
font-family: opendyslexic, sans-serif;
text-align: center;
font-size: 24px;
line-height: 1.2;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #f7abff /* pink */;
}
li {
list-style: none;
}
.navbar {
display: flex; /* stops the logo being on top of everything else */
align-items: center; /* centres them vertically */
justify-content: space-between; /* puts navbar at right */
padding: 20px; /* adds space at the top */
background-color: rgb(85, 96, 255)/* blue */; /* the background color */
}
.services {
position: relative;
float: right;
}
.dropdown {
background-color: #5560ff/* pink */; /* this makes the dropdown menu colored */
padding: 1em 0;
position: absolute;
display: none;
border-radius: 8px;
top: 30px;
padding-right: 20px;
padding-left: 20px;
}
.services:hover .dropdown {
display: block;
}
.image{
border-radius: 50%;
}
I have been looking up many other things and gone through heaps of questions but as a begginer I dont know what I need to do with the answers
If i can just have the CSS code and where it goes with a small description of what it does that will be greately appreciated

Answer 1

#amauryHanser gave me the answer
I added this
.dropdown {
left: -50%; }
it has fixed it and moves it left a bit, I can ajust the numbers until it works

Answer 2

.services {
position: relative;
}
.dropdown {
background-color: #5560ff/* pink */;
padding: 1em 0;
position: absolute;
border-radius: 8px;
top: 2rem;
padding-right: 20px;
padding-left: 20px;
left: 50%;
transform: translateX(-50%);
}
Try this :D