如何将下拉菜单集中？

Question

我一直在一个网站上工作，想知道如何将下拉列表集中， 我的代码作为代码笔为 codepen 这是CSS 我尝试了很多事情，包括将位置标记更改为不同的值，并在填充和其他间隙中添加

<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%;
}

我一直在查找许多其他问题并遇到了很多问题需要与答案有关 如果我只能拥有CSS代码以及对它所做的少量描述，那么将会非常感谢

Answer 1

@AmauryHanser给了我答案
我添加了

.dropdown { 
  left: -50%; }

它已经修复了它，并将其移动一点，我可以算起数字，直到它起作用

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%);
}

尝试一下：d